無論使用什么方式實現(xiàn)，都需要有一個前提：
html {
height: 100%;
}
body {
min-height: 100%;
}
保證容器至少撐滿一屏。
1. 使用absolute方式
給footer的定位設(shè)置為absolute，然后置于底部，點我查看demo
效果展示
html結(jié)構(gòu)：
<body>
<header>我是頭部</header>
<article>
中間部分
</article>
<footer>底部永遠固定最下面</footer>
</body>
對應(yīng)的css為：
html {
height: 100%;
}
body {
min-height: 100%;
padding: 0;
position: relative;
}
header {
height: 100px;
background-color: aquamarine;
}
article {
height: 100px;
background-color:blueviolet;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 100px;
background-color: blanchedalmond;
}
2. 使用flex布局
flex也好理解，將flex-direction設(shè)置為column實現(xiàn)縱向布局。點我查看demo
flex展示效果
對應(yīng)的html結(jié)構(gòu)同上；
css為：
html {
height: 100%;
}
body {
padding: 0;
display: flex;
flex-direction: column;
min-height: 100%;
}
header {
height: 100px;
background-color: aquamarine;
}
article {
flex: 1;
background-color:blueviolet;
}
footer {
height: 100px;
background-color: blanchedalmond;
}
