web前端-Sticky Footer布局
2017-02-27 本文已影响176人
LiYajie
什么是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的高度一样即可.
以上是我的理解, 如有错误, 请大神指正.
