美文网首页
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