本文介绍两种实现stickyfooter的方法：一种是通过margin-bottom的负值来实现，另一种是使用弹性布局。前者适用于需要兼容多种浏览器的情况，后者则更简洁且易于维护。
sticky footer的特征
如果页面内容不够长的时候，页脚块粘贴在视窗底部；
如果内容足够长时，页脚块会被内容向下推送。
1. 利用margin-bottom的负值
<body>
<div class="wrapper">
<div class="content"></div>
</div>
<div class="footer"></div>
</body>html, body, .wrapper {
height: 100%;
}
body > .wrapper {
height: auto; min-height: 100%;
}
.content {
padding-bottom: 150px; /* 必须使用和footer相同的高度 */
}
.footer {
position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
clear:both;
}注：为了保证兼容性，还需要加上clearfix
.clearfix{
display: inline-block;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} 2. 利用弹性布局
这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。
<body>
<div class="content"></div>
<div class="footer"></div>
</body>body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer{
flex: 0;
}涉及到的其他知识点
vh: 相对于视口的高度(1vh=1%)
vw: 相对于视口的宽度(1wh=1%)
css3支持calc()
例如：min-height:calc(100vh-100px);
摘抄自：https://www.cnblogs.com/shicongbuct/p/6487122.html
扫一扫
1522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
