让最后一个div的高度自动填满浏览器窗口剩余部分

让最后一个元素占满当前视口的剩余空间，缩放浏览器窗口也没影响。

HTML

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>

CSS

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

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container > div:last-child {
  background-color: tomato;
  flex: 1;
}

代码说明

1. height: 100% 将容器高度设置为视口高度。

2. display: flex 启用flexBox布局。

3. flex-direction 设置flex条目的方向为从顶部到底部。

4. 设置最后一个元素的 flex-grow: 1 使其可以占满容器的剩余可用空间。

5. 父元素必须有视口高度。flex-grow: 1 也可以作用于第一个或第二个元素。