CSS SNIPPET

  返回

自动填满容器剩余空间  页面布局

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

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;
}
效果演示
Div 1
Div 2
Div 3
代码说明
  1. height: 100% 将容器高度设置为视口高度。
  2. display: flex 启用flexbox布局。
  3. flex-direction: column 设置flex条目的方向为从顶部到底部。
  4. 设置最后一个元素的flex-grow: 1使其可以占满容器的剩余可用空间。
  5. 父元素必须有视口高度。flex-grow: 1 也可以作用于第一个或第二个元素。
浏览器支持

100.0%

⚠️ 完整支持需要浏览器前缀。