这种是一个非常常见的布局方式,但是对于新手来说是比较常见的难题。
这种布局方式在后台管理系统中比较常见,当我们内容不足浏览器窗口高度时,底部内容需要固定在底部。当内容超出了浏览器窗口高度,就会随着内容往后推。
- 原文来源:详情
在有CSS3之前,实现这个效果是颇有难度的。浏览器窗口高度是会根据不同用户打开浏览器的情况,屏幕大小的差异和浏览器的缩放比例而变。我们需要借助JavaScript来实时获取浏览器高度进行运算才能实现。虽然说标题是说“固定”底部,但是我们想要的效果不是position: fixed
。使用固定定位,在内容高于窗口高度时,就会挡住我们的内容。
随着CSS3的来临,最完美的实现方式是使用Flexbox
。实现的关键就是使用不太被关注的flex-grow
属性,可以在我们的内容标签元素(比如div
)中使用。在我们下面的例子里使用了main
标签。
我来讲解一下实现原理吧。

flew-grow
是用来控制一个flex元素相对它同等级flex元素的自身可扩充的空间。如果我们使用flex-grow: 0
,那这个flex元素就完全不会扩展了。所以我们需要把头部和底部之间的内容标签元素设置为flex-grow: 1
或者flex-grow: auto
,这样内容部分就会自动填充满头部和底部之外的所有空间。
为了避免底部内容受内容部分扩充空间的影响,我们给footer
底部元素flex-shrink: 0
属性。flex-shrink
的作用与flex-grow
是恰恰相反,用来控制flex元素收缩的空间,这里我们给了flex-shrink: 0
就是为了底部footer
的大小不受影响。
我们直接上HTML和CSS代码看看是怎么实现的。
- HTML
<div id="document">
<nav>
<h1>头部内容</h1>
</nav>
<main>
<p>可以添加更多内容看看底部的变化哦!</p>
</main>
<footer>
<h1>底部内容</h1>
</footer>
</div>
- CSS
#document {
height: 100vh;
display: flex;
flex-direction: column;
background: #202020;
font-family: microsoft yahei,wenquanyi micro hei,sans-serif !important;
}
nav, footer {
background: #494949;
display: flex;
justify-content: center;
}
main {
color: #bdbdbd;
flex: auto;
}
footer {
flex-shrink: 0;
}
* {
margin: 0;
}
h1,
p {
padding: 15px;
}
nav > h1 {
color: #82FCFD;
text-shadow: 1px 1px 4px #00000080;
}
footer > h1 {
color: #82FCFD;
text-shadow: 1px 1px 4px #00000080;
}
知识点总结:
- flex-grow --- 是用来控制一个flex元素相对它同等级flex元素的自身可扩充的空间
- flex-shrink --- 作用与
flex-grow
是恰恰相反,用来控制flex元素收缩的空间