Sticky footers

发表于   |   分类于

什么是Sticky footers布局

简单地说，就是如果页面不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

解决方案

举个例子

1
2
3
4
5
6
7
8
9
<header>
	<h1>这是头区域部</h1>
</header>
<main>
这是内容区域。
</main>
<footer>
	<p>这是底区域部</p>
</footer>
1
2
3
4
5
6
7
8
9
10
*{
	margin:0;
	padding:0;}
header{
	border-bottom:2px solid #333;}
footer{
	width:100%;
	height:200px;
	background-color:#333;
	color:#fff;}

如图

这里我主要使用flexbox来解决问题。
添加样式

1
2
3
4
5
6
body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh; } 
main { 
    flex: 1; }

效果如下：

sticky footer布局已完成。

话说vh是什么单位啊？
原来vh是相对于视窗的高度，视窗高度是100vh;相应也有100vw。

参考文章