三个div垂直布局时如何让底部div占满剩余屏幕消除留白

1. 默认html、body元素没有设置明确高度，百分比高度是基于父元素高度计算的，因此外层div设置height:100%无法生效
2. 第三个div设置height:100%会继承外层容器的完整高度，加上前两个固定高度的div，总高度会超出视口，反而出现留白和滚动条

给页面根元素、body、外层容器开启高度占满，外层容器使用垂直Flex布局，第三个div设置自动填充剩余空间即可。

修改后完整代码： #

<!-- 先加全局样式解决默认边距和根元素高度问题 -->
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  width: 100%;
}
</style>

<div id="the_whole_thing" style="height:100%; width:100%;display: flex;flex-direction: column;">
  <div id="toprow" style="width:100%; height:150px; background-color:red;color:white">
    First row
  </div>
  <div id="secondrow" style="width:100%; height: 300px;background-color:black;color:white">
    Second row
  </div>
  <!-- 第三个div去掉height:100%，加flex:1自动占用剩余垂直空间 -->
  <div id="thirdrow" style="flex:1;width:100%;background-color:blue;color:white">
    Third row
  </div>
</div>

• 重置全局默认的margin和padding，避免浏览器默认边距导致的溢出
• 给html、body设置height:100%，让百分比高度可以正常继承
• 外层容器添加display: flex; flex-direction: column，开启垂直方向的弹性布局
• 第三个div删除height:100%，新增flex: 1，该属性会自动分配垂直方向的所有剩余空间，无论视口高度如何变化都能刚好占满底部
• 无定位需求的情况下，三个div的position:relative属性可以直接删除，不影响效果

如果不想用flex布局，也可以用calc动态计算第三个div的高度：

1. 同样先给html、body设置height:100%，重置默认边距
2. 第三个div的高度设置为height: calc(100% - 450px)，450px是前两个div的高度之和（150px+300px）
   该方案扩展性较差，前两个div高度调整时需要同步修改calc参数，更推荐使用flex方案。

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