【css】css 实现填充剩余高度

自动填充高度.html

<div class="box">
  <div class="header">头部</div>
  <div class="auto-fill">自动填充</div>
</div>

使用 flex（推荐）

• 兼容性好；
• 只需关注自动填充的 div，无需考虑其他 div 的高度

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.header {
  background: dodgerblue;
  height: 30px;
}

.auto-fill {
  background: wheat;
  flex: 1
}

使用绝对定位（一般）

• 无兼容问题；
• 但需要知道其他 div 已占据的高度

.box {
  height: 100%;
}

.header {
  background: dodgerblue;
  height: 30px;
}

.auto-fill {
  background: wheat;
  position: absolute;
  top: 30px;
  bottom: 0px;
}

使用 calc 函数（一般）

• 无兼容问题；
• 但需要知道其他 div 已占据的高度；

.box {
  height: 100%;
}

.header {
  background: dodgerblue;
  height: 30px;
}

.auto-fill {
  background: wheat;
  height: calc(100% - 30px);
}

See the Pen Untitled by Jared Stanley ( @jaredstanley) on CodePen.