Sticky flooter
2020-09-10 本文已影响0人
GaoXiaoGao
不是标准代码,记录一下实现方法
<div class="全屏的最外层布局">
<div class="上部内容 clearfix"> //clearfix 为清除浮动
<div class="真正写内容的部分">
</div>
</div>
<div class="底部固定不动部分"></div>
</div>
.上部内容{
//最小高度设置为全屏高,才能将底部的布局挤到底部
min-height: 100%
width:100%
}
//真正写内容的部分一般上下留有间距
.真正写内容的部分{
margin-top: 64px;
//内容离下面64px为了给底部的固定部分留出空间,不被遮挡
padding-bottom: 64px;
}
.底部固定不动部分{
position: relative;
width:32px;
height:32px;
//-64px使得底部向上 走64px
margin: -64px auto 0 auto;
clear:both;
font-size:32px;
}
/*使用为伪元素清除浮动*/
.clearfix:after {
content:""; /*必须写content*/
height: 0;
line-height: 0;
display: block;
clear: both;
visibility: hidden;
}
.clearfix {
/*兼容IE*/
zoom:1;
}