stickFooter

flex stickyFooter
  1. 普通css的解决方案
  2. FlexBox解决方案

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

普通css的解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style>
	html,body{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	.space{
		min-height: 100%;//这个百分比比较重要
	}
	.box{
		background-color: red;
		height: 500px;
		padding-bottom: 32px;//这个是为了当页面高于屏幕宽度时能够保持底部在他下面
	}
	.footer{
		height: 32px;
		background: green;
		margin: -32px auto 0 auto ;
	}
</style>
<body>
	<div class="space">
			<div class="box">这是什么鬼</div>
	</div>
	<div class="footer"></div>
</body>
</html>

FlexBox解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		html,body{
			display: flex;
			flex-flow: column; //重要
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}
		.header{
			background-color: red;
			/*height: 100px;*/
		}
		.main{
			background-color: green;
			flex:1; //设置了这个才能使得中间的容器能将剩余的页面撑满，也就是页面始终是占满视口，很重要
		}
		.footer{
			background-color: orange;
			/*height: 100px;*/
		}
	</style>
</head>
<body>
<!--这个header必须有内容才能撑开-->
<div class="header">dfasda</div> 
<div class="main">
	<p>这是什么鬼</p>
</div>
<!--这个footer必须有内容才能撑开-->
<div class="footer">sfdasfs</div>
</body>
</html>

当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器