无论使用什么方式实现，都需要有一个前提：
html {
height: 100%;
}
body {
min-height: 100%;
}
保证容器至少撑满一屏。
1. 使用absolute方式
给footer的定位设置为absolute，然后置于底部，点我查看demo
效果展示
html结构：
<body>
<header>我是头部</header>
<article>
中间部分
</article>
<footer>底部永远固定最下面</footer>
</body>
对应的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设置为column实现纵向布局。点我查看demo
flex展示效果
对应的html结构同上；
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;
}
网友评论