CSS实现固定高度header、footer时content填充浏览器剩余高度的方法

问题原因 #

你现有的CSS代码存在选择器匹配错误： .box header 规则对应类名为box容器下的header元素，但你的DOM结构中header是body的直接子元素，没有嵌套在.box容器内，导致flex布局规则没有正确生效。

正确实现方案 #

使用flex布局即可实现需求，修改后的完整代码如下：

HTML结构 #

<header></header>
<div class="content"></div>
<footer></footer>

CSS代码 #

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

body  {
  display: flex;
  flex-direction: column;
  /* 用min-height配合100vh可以避免content内容超出可视区时布局错乱 */
  min-height: 100vh;
}

header {
  /* 可自行修改为需要的固定高度 */
  height: 60px;
  flex: 0 0 auto;
}

.content {
  flex: 1 1 auto;
  /* 内容超出时自动出现纵向滚动条，按需配置即可 */
  overflow-y: auto;
}

footer {
  /* 可自行修改为需要的固定高度 */
  height: 50px;
  flex: 0 0 auto;
}

规则说明 #

• flex: 0 0 auto 表示header和footer不会被压缩也不会自动拉伸，始终保持你设置的固定高度
• flex: 1 1 auto 表示content区域会自动占用flex容器的所有剩余可用高度
• 100vh 可以直接匹配视口的全高，和单独设置html、body高度为100%的效果一致，主流浏览器均兼容

内容的提问来源于stack exchange，提问作者B L Praveen