Sticky footer：页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。
sticky-footer
实现的方式主要有以下几种：
1.Flexbox解决方案
核心代码：
<body>
<div class="main">
content
</div>
<div class="footer">footer</div>
</body>
body{
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main{
flex: 1;
}
.footer{
height:50px;
}
100vh（相对于视口的高度。视口被均分为100单位的vh）这里就不需要设置html{height:100%;}
2.calc()解决方案
核心代码：
<body>
<div class="main">
content
</div>
<div class="footer">footer</div>
</body>
.main{
min-height: calc(100vh - 50px - 1em); /* 1em为元素之间的间距 */
}
.footer{
background: #21BAA8;
}
这个方法需要注意减去元素之间的边距。
3.absolute解决方案
<body>
<div class="main">
content
</div>
<div class="footer">footer</div>
</body>
body{
margin:0;
position: relative;
min-height: 100vh;
padding-bottom: 50px;
box-sizing: border-box;
}
.footer{
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50px;
}
4.负margin解决方案
这个方法需要增加额外的html元素。
<body>
<div class="main">
content
<div class="push"></div>
</div>
<div class="footer">footer</div>
</body>
.main{
min-height: 100%;
}
.push{
height: 50px;
}
.footer{
margin-top: -50px;
height: 50px;
}
这里也可以设置.mian{margin-bottom: -50px;}，思路一样。
5.Grid解决方案
<body>
<div class="main">
content
</div>
<div class="footer">footer</div>
</body>
body{
min-height: 100vh;
display: grid;
grid-template-rows: 1fr auto;
}
.footer{
grid-row-start: 2;
grid-row-end: 3;
}
参考:
网友评论