css 如何让一个 div 在竖直方向上自动填充高度？

Question

如上图，整个网页竖直方向分为三部分：header、content、footer。

其中 header 和 footer 的内容很少，也就是高度很低，但是 content 内容很多，高度够高。

如果 content 内容偏少了点，那么它的高度就不足以撑起整个页面，浏览器默认让 footer 拿到了更多的高度，但是 footer 里的 margin-top 和 margin-bottom 就不对齐了，很丑。我百度到的方案是 content 给一个 flex-grow: 1;，我试了下不可以。

想问问我这哪里写的有问题。网站在这里：https://ethsonliu.com/

Answer 1

看了下你做的，说一下我的方法（看看是不是你要的结果）
需要改一下几个地方

html,body{
  height:100%;
}
.content{
  overflow-y: auto;
}

最后，把.footer提到外边和.content同级。

Answer 2

先贴一个张鑫旭的 CSS小测 的视频，这期的小测就是和你的需求是类似的。

如果你懒得看，我在下方给你贴上一个简单的实现

文章不满一屏时 .footer 挂底，文章超出一屏时跟随在 .container 之后

<div id='app'>
    <div class='container'></div>
    <div class='footer'></div>
</div>
<style>
#app{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</style>

如果你想使用 .footer 一直挂挂底，可以直接使用 position:fixed

<div id='app'>
    <div class='container'></div>
    <div class='footer'></div>
</div>
<style>
#app{
    padding-bottom:50px;
}
.footer{
    width:100%;
    height:50px;
    position:fixed;
    left:0;
    bottom:0
}
</style>

Answer 3

你非要一整屏的话，可以考虑header、footer定高，中间content计算min-height。
比如

.header{
    height:100px;
}
.footer{
    height:100px;
}
.content{
    min-height:cacl(100vh - 100px - 100px);
}

Answer 4

内部元素 flex-grow 的前提是父元素 display:flex。你得知其然还要知其所以然。