Sticky Footer布局概括如下:如果页面内容不够长的时候,页脚粘贴在视窗底部;如果内容足够长,页脚会被内容向下推送。
我在网上看了几种方法,记录一下最简单的这种方法 方便使用:
<div class="div1">
<section></section>
<footer></footer>
</div>
<!--我比较喜欢用scss-->
.div1{
display: flex;
flex-direction: column; //主轴为垂直方向,起点在上部
min-height: 100vh;
section{
flex: 1; //占据所有剩余空间
width: auto;height: 200px;
background-color: red;
}
footer{
flex: 0; //不占据剩余空间
width: auto;height: 100px;
background-color: black;
}
}