Sticky footers设计是最古老和最常见的效果之一。做项目时，我们经常会碰到它：当页面不足一屏幕时，footer能固定在视窗底部。当页面大于一屏幕时，footer能够被自动推下去。
在现在浏览器中，我们可以放心大胆的使用Flexbox实现Sticky footer。使用Flexbox，我们仅仅需要几行css代码，就能完美实现，而不需要做一些计算。
假设，我们的页面结构是这样的。
<body>
<header>头部，高度确定</header>
<main>主体部分，高度不确定</main>
<footer>底部，高度确定</footer
</body>
现在，需要实现sticky footer效果,那么，首先，我们需要给body添加一些样式:
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
display:flex保证body是flexbox布局。flex-flow:column。使得子元素是纵向排列的。min-height:100vh;使得main高度不够时，body至少还有一个视窗的高度。
main {
flex:1;
}
然后我们设置main的css样式，flex:1。意思是，如果body是一视窗高度，去掉header和footer所占的高度后，剩下都归main所有。
如果一来，我们就实现了sticky footer效果。
网友评论