如何设置iframe自动适配尺寸占满导航栏下方空间且不重叠其他元素

解决方案 #

你当前iframe无法占满导航下方剩余空间的核心原因是百分比高度需要继承父元素的明确高度定义，且原有布局没有给内容区自动分配剩余视口高度，按以下方案修改即可实现需求：

修改后的完整CSS代码

/* 新增：重置页面默认边距，给根元素定义完整高度 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

div#content {
    background-color:transparent;
    /* 新增：让内容区自动占满头部、导航栏之外的所有剩余高度 */
    flex: 1;
    width: 100%;
}

.content > div {
    display: none;
    /* 新增：让iframe的父容器占满内容区高度 */
    height: 100%;
}

.content > div:target {
    /* 把原有的table-row改为block即可 */
    display: block;
}

iframe {
    display: block;
    background-color: orange;
    width: 100%;
    height: 100%;
    /* 可选：移除iframe默认边框，视觉效果更统一 */
    border: none;
}

修改后不需要调整你现有的HTML代码，刷新页面即可看到iframe自动占满导航栏下方的全部可视区域，不会和头部、导航栏出现重叠。

内容的提问来源于stack exchange，提问作者MaxiFlaxiBoii