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