美文网首页
Sticky flooter

Sticky flooter

作者: GaoXiaoGao | 来源:发表于2020-09-10 10:26 被阅读0次

不是标准代码,记录一下实现方法

<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;
            }

相关文章

网友评论

      本文标题:Sticky flooter

      本文链接:https://www.haomeiwen.com/subject/iqiuektx.html