首页 技术设计 前端 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);
}