web前端-Sticky Footer布局

什么是Sticky Footer布局

Sticky Footer布局实现的效果是, 当页面中的内容高度小于屏幕高度的时候, 让底部div绝对定位在底部, 当内容高度大于屏幕高度的时候, 底部div会紧随内容其后, 效果如下:

内容高度小于屏幕高度

当内容高度大于屏幕高度的时候, 效果如下:

内容高度大于屏幕高度

只有滚动到最后才能看到底部div

代码实现:

<body>
    <div class="container">
        <p>我是内容</p>
    </div>
    <footer class="footer">
        我是底部
    </footer>
</body>

*{margin: 0;}
html,body{
    height: 100%;
}
.container{
    min-height: 100%;
    margin-bottom: -100px;
    background-color: #0094ff;
}
.footer{
    background-color: #2AEB2B;
}
.container::after{
    content: '';
    display: block;
}
.footer,.container::after{
    height: 100px;
}

原理

当我们设置.container的下面的外边距为负的时候, 下面相邻的元素自然就会向上移动对应的距离, 这样效果就有了, 但是内容还是会溢出覆盖到底部的元素上 , 所以要加一个距离, 所以给.container 的 :after设置相同的高度, 我们也可以在.container中添加一个div, 设置这个div的高度和.footer的高度一样即可.

以上是我的理解, 如有错误, 请大神指正.

最后编辑于：2017.12.06 01:17:44

web前端-Sticky Footer布局

推荐阅读更多精彩内容