Sticky Footer 布局是在开发中经常会用到的一种布局，它的效果简而言之就是当内容的高度小于屏幕的高度时，footer组件会停留在屏幕的最下方，但如果内容高度大于屏幕高度，则footer会被推到内容的最下方.本文将讨论如何使用flex布局来解决这个问题。
HTML
<body>
<header>
<h1>Header</h1>
</header>
<div class="main">
<div>Main Content </div>
</div>
<footer>
<h1>Sticky Footer</h1>
</footer>
</body>
CSS
<style>
html,body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.main {
flex: 1;
}
</style>
解释
这里采用了flex布局，flex-flow:column定义了纵向布局，min-height:100vh定义了body的最小高度是100%的视窗高度。.main中的样式flex属性是flex-grow,flex-shrink和flex-basis的简写，分别代表项目的放大比例(默认0)，项目的缩小比例(默认1)和项目在分配多余空间之前占据的主轴空间(默认auto，即项目的原大小)，这里flex:1等同于flex:1 1 0%，如果其他项目的flex都是flex:1，则会等分剩余空间。但假如<footer>设置了flex:2，那么页脚的高度将会是主内容高度的2倍。总的来说，为了实现sticky footer,min-height和flex的定义缺一不可。
网友评论