CSS实现Div填充页面剩余高度：底部Div填满页面而非父容器

嘿，我来帮你搞定这个问题！你想要让.bottom div填满整个浏览器视口的剩余高度，而不是仅仅它父容器的剩余空间对吧？你当前的代码里，height: 100%没达到预期的核心原因是：html和body没有设置明确的视口高度，而且100%是相对于父元素的高度，没法自动计算剩余空间。下面给你几个靠谱的解决办法：

方法1：Flexbox布局（首推，现代浏览器友好） #

Flexbox是最简洁灵活的方案，只需要给body设置垂直方向的flex布局，再让.bottom自动占满剩余空间：

html, body {
  margin: 0;
  height: 100vh; /* 让body完全占满浏览器视口高度 */
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
}

.top {
  background-color: green;
  width: 100px;
  height: 50px; /* 固定高度保持不变 */
}

.bottom {
  background-color: red;
  width: 100px;
  flex-grow: 1; /* 关键：让这个元素自动填充所有剩余空间 */
}

HTML部分不用改动：

<div class="top"></div>
<div class="bottom"></div>

不管你怎么缩放浏览器窗口，.bottom都会自动填满视口减去.top高度后的剩余区域，完美适配各种场景。

方法2：CSS Grid布局 #

如果你更习惯用Grid，这个方案同样简单直观：

html, body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行自适应.top的高度，第二行占满剩余空间 */
}

.top {
  background-color: green;
  width: 100px;
  height: 50px;
}

.bottom {
  background-color: red;
  width: 100px;
}

这里的1fr是Grid的单位，代表“剩余可用空间的一份”，刚好符合我们的需求。

方法3：Calc计算（兼容旧浏览器） #

如果需要兼容IE11这类老浏览器，可以用calc()手动计算高度，不过前提是你知道.top的固定高度：

html, body {
  margin: 0;
  height: 100vh;
}

.top {
  background-color: green;
  width: 100px;
  height: 50px;
}

.bottom {
  background-color: red;
  width: 100px;
  height: calc(100vh - 50px); /* 视口高度减去.top的固定高度 */
}

这个方法的缺点是如果.top的高度以后变了，你得同步修改calc里的数值，灵活性不如前两种。

最后提醒一句：你原代码里已经给html和body设了margin:0，这点非常重要，能避免出现不必要的滚动条或者留白，记得保持住哦！

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