网页中的foot底部定位问题

标签：

有时候，我们会碰到这样一个问题。
网页底部一般有个foot对吧，放置一些友情链接版权声明什么的，这个模块是如何定位的？
要是直接放内容区域的下面的话，假如是内容区域的高度不够的话，那么foot下面是会留有很多空白的；
好了，这时你会说直接相对body定位到底部，那么当内容区域的高度多的话或用户把浏览器放小看的话，部分内容是会被遮住了的。
这里我们可以有个方法解决这问题，通过::after伪元素撑起footer的高度，然后margin-bottom一个负值吃掉这个::after元素的高度。

html代码：
<div class="wrap">
    <div>1这里是内容区域</div>
    <div>2这里是内容区域</div>
    <div>3这里是内容区域</div>
    <div>4这里是内容区域</div>
    <div>5这里是内容区域</div>
</div>
<footer class="footer">友情链接and版权声明</footer>

CSS代码：

html, body{height: 100%; font-size: 24px;}
.wrap{min-height: 100%; margin-bottom: -60px; background: green;}
.wrap:after{content: ""; display: block;}
.footer, .wrap:after{height: 60px;}
.footer{background: orange; text-align: center;}

网页中的foot底部定位问题

标签：

原文地址：http://www.cnblogs.com/calin/p/4814066.html