如何让iframe占满导航栏外剩余屏幕空间且不硬编码高度？

方案1：保留fixed定位，用calc动态计算高度 #

该方案无需调整现有布局结构，仅修改iframe样式即可：

iframe {
    z-index: -1;
    position: fixed;
    top: 10vh; /* 对齐导航栏底部位置 */
    width: 100%;
    height: calc(100vh - 10vh); /* 动态计算剩余视口高度，无需硬编码固定数值 */
}

原理：calc() 支持对不同单位的数值做动态运算，100vh为整个视口高度，减去导航栏占用的10vh，得到的就是iframe可用的最大高度，同时设置top值让iframe从导航栏下方开始渲染，不会被遮挡也不会超出视口。

方案2：Flex弹性布局（更推荐，完全无需关联导航栏高度） #

该方案适配性更强，哪怕后续修改导航栏高度，也不需要调整iframe样式，可自动适配剩余空间：

修改后的完整CSS代码： #

body {
  margin: 0;
  min-height: 100vh; /* 让body撑满整个视口高度 */
  display: flex;
  flex-direction: column; /* 子元素纵向排列 */
}

#navbar {
    width: 100%;
    height: 10vh;
    background-color: skyblue;
}

iframe {
    flex: 1; /* 自动占满父容器剩余空间 */
    width: 100%;
    border: none; /* 去掉iframe默认边框 */
}

说明： #

• 移除了iframe的fixed定位和z-index属性，让其回归正常文档流
• 父容器body开启flex纵向布局后，设置了flex:1的子元素会自动填充所有剩余可用高度，完全不需要手动计算数值，也不会出现溢出问题。

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