如何使用Flexbox实现指定div填充页面剩余高度？

核心失效原因 #

你现有代码无法达到预期效果，本质是三个关键逻辑缺失：

• 页面没有设置全高度的计算基准，flex弹性分配没有可参考的总高度值，所有块元素高度仅由内容撑开
• 布局层级没有做统一的纵向flex管理，弹性填充块没有被纳入父级的剩余高度分配范围，自带的flex规则没有生效依据
• 中间的.fill-height包裹层打断了高度传递：该层既没有被纳入上层的弹性分配规则，也没有设置有效高度，内部的flex元素根本拿不到可分配的空间

具体修正步骤 #

1. 先重置全局默认样式，建立全高度计算基准
   新增全局样式，清除浏览器默认边距，给页面根节点设置视口高度基准：

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   html, body {
     min-height: 100vh;
   }
   

2. 搭建统一的纵向弹性布局
   把导航栏、固定高度的area1、需要填充的area-2全部纳入同一个纵向flex容器，也就是给body设置flex属性，删掉无实际作用的.fill-height包裹层，避免高度传递被打断：

   body {
     display: flex;
     flex-direction: column;
   }
   

3. 调整弹性分配规则
   给两个固定高度的区块设置flex-shrink: 0，避免被压缩高度；给需要占满剩余空间的area-2设置flex: 1，自动吃掉所有剩余高度。
   同时删除无效的冗余样式：比如页面结构里不存在对应元素的.nav-spacer类、无实际作用的包裹层多余flex设置。

修正后完整可运行CSS代码 #

/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}

.nav {
  height: 5rem;
  background-color: aqua;
  flex-shrink: 0;
}

.area1 {
  height: 10rem;
  background-color: brown;
  flex-shrink: 0;
}

.area-2 {
  flex: 1;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.area-2-a {
  width: 20%;
  background-color: #4f90ff;
}

.area-2-b {
  width: 80%;
  background-color: #2b41ff;
}

额外兼容提示 #

现有HTML结构里用的<p1>不属于合法HTML标签，建议替换为标准<p>标签，避免不同浏览器的渲染兼容问题。

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