如何让最后一个<div>从自身垂直位置起占满浏览器窗口剩余高度？

嘿，这个需求我太熟了！不管你后面加多少个前置div，都能轻松实现最后一个div自动占满剩余窗口高度，给你推荐几个靠谱的方案：

方案一：CSS Flexbox（首推，最灵活） #

Flexbox天生就是为这种弹性布局设计的，完全不用手动计算高度，自动适配所有情况。

实现步骤： #

1. 重置html和body的默认边距，让它们占满视口高度
2. 把所有div的父容器设为垂直方向的flex布局
3. 前置的div设置flex-shrink: 0，防止它们被压缩变形
4. 最后一个div设置flex: 1，让它自动占据所有剩余空间

代码示例： #

<!DOCTYPE html>
<html>
<head>
<style>
/* 重置默认样式，让根元素占满视口 */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* 父容器设为垂直flex布局 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 前置div保持自身高度，不被压缩 */
.top-section {
  flex-shrink: 0;
  padding: 1.5rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

/* 最后一个div自动占满剩余高度 */
.bottom-section {
  flex: 1;
  padding: 1.5rem;
  background-color: #e8e8e8;
  /* 可选：如果内容过多，让内部滚动而不是撑破页面 */
  overflow: auto;
}
</style>
</head>
<body>
<div class="container">
  <div class="top-section">第一个div，高度由内容自动撑开</div>
  <div class="top-section">第二个div，哪怕内容再多也不会被压缩</div>
  <!-- 随便加多少个.top-section都没问题 -->
  <div class="bottom-section">我是最后一个div，会自动占满剩下的窗口高度😎</div>
</div>
</body>
</html>

这个方案的好处是完全自适应，不管你加多少个前置div，或者前置div的高度因为内容变化，最后一个div都会自动调整，完美符合你的需求。

方案二：CSS Grid（适合固定数量前置元素） #

如果你的前置div数量是固定的，Grid也是个不错的选择，代码同样简洁：

代码示例： #

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.container {
  display: grid;
  min-height: 100vh;
  /* 前面两个div用auto高度，最后一个用1fr占剩余 */
  grid-template-rows: auto auto 1fr;
}

.top-section {
  padding: 1.5rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.bottom-section {
  padding: 1.5rem;
  background-color: #e8e8e8;
  overflow: auto;
}
</style>
</head>
<body>
<div class="container">
  <div class="top-section">第一个固定高度div</div>
  <div class="top-section">第二个固定高度div</div>
  <div class="bottom-section">占剩余高度的div</div>
</div>
</body>
</html>

不过这个方案的局限性是，如果前置div数量变化，你需要手动修改grid-template-rows的参数，所以灵活性不如Flexbox。

不推荐的方案：calc() #

之前可能有人会用calc(100vh - 前置元素总高度)来设置最后一个div的高度，但这个方法太死板了——只要前置元素的高度因为内容变化，或者你新增了前置div，就必须手动修改数值，完全不符合“自动计算”的需求，所以不建议用。

补充提示 #

如果最后一个div的内容超过了剩余高度，记得加上overflow: auto，这样内容会在div内部滚动，而不是把整个页面撑高，体验会好很多。

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