如何让中间Div填充页面剩余高度，内容追加时保持高度并滚动？

这个问题我之前做后台类页面的时候刚好碰到过，用flexbox就能完美解决，而且完全不用固定页眉和页脚的高度，刚好适配你说的动态文本需求！

具体实现步骤如下：

• 先确保根元素能占满整个视口高度，避免布局出现塌陷：

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

• 给包裹页眉、中间区域、页脚的最外层容器设置垂直方向的flex布局，并且让它至少占满视口高度：

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

• 页眉和页脚不用设置固定高度，让它们自动适配自身的动态文本内容即可，你可以正常加内边距、背景色这类样式：

.header, .footer {
  padding: 1rem;
  background-color: #f5f5f5;
}

• 重点处理中间的滚动区域：设置flex: 1让它自动填充页眉和页脚剩下的所有空间，再加上overflow: auto，当内容超过这个区域的高度时，就会在内部出现滚动条，绝对不会撑开整个页面：

#scroll {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

原理说明 #

flex: 1相当于告诉浏览器：这个元素要占据容器里除了其他flex子元素（页眉、页脚）之外的所有剩余空间。而overflow: auto会在内容高度超过元素自身高度时，自动生成内部滚动条——这样不管你往中间区域加多少数据，它都只会在自己的范围内滚动，不会把整个页面拉长。

之前你遇到的问题，应该是没给外层容器设置正确的高度和flex布局，或者没给中间元素加flex: 1，导致中间区域跟着内容一起撑开了。现在这样设置后，就能完美实现你要的效果啦！

内容的提问来源于stack exchange，提问作者Jacob Barrow