平时拿CSS布局都是一些内容比较多的网站,这两天用CSS+DIV弄了个内容少的页面,发现了一个小问题,可能大家都会遇到,那就是网站FOOTER的定位,如果内容比较少的话,页面的FOOTER就会随着内容的减少跑到上面去，不是乖乖的在下面呆着；,fixed固定底部的话，又会遮挡正文内容。百度了半天终于给搞定了,也算一个小小的技巧给大家分享。首先我们要在外层设定一个DIV(content
下面是实现的方法:
main
你可以改变浏览器窗口的高度，来观察footer效果。
文字文字文字文字文字文字文字文字文字文字
Footer
然后我们写下CSS:
body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
#content {
min-height:100%;
position: relative;
}
#main {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}
首先把HTML和BODY的HEIGHT属性设为100%;保证content的高度能撑满浏览器;
然后把#content的高度也设置为100%，但是这里我们使用了“min-height”属性，而不是的height属性，这是因为如果#main中的内容如果增加了，他的高度超过了浏览器窗口的高度，那么如果把#content的高度仍然是100%，就会导致#footer仍然定位在浏器窗口的下端，从而遮盖了#content中的内容。
而使用min-height属性的作用就是使#content的高度“至少”为浏览器窗口的高度，而当如果它里面的内容增加了，他的高度会也跟随着增加，这才是我们需要的效果。
接下来，将#content设置为相对定位，目的是使他成为它里面的#footer的定位基准
然后把#foooter设置为绝对定位，并使之贴在#main的最下端。
但是要注意，如果当我们把#footer贴在#content的最下端以后，他实际上已经和上面的#main这个div重叠了，为了避免覆盖#main中的内容，我们在#main中设置了下侧的padding，使padding-bottom的值等于#footer的高度，就可以保证避免覆盖#main的文字了。
CSS居中
相关链接：
css控制footer在底部
css定位网站的footer
内容少时footer仍在底
divcss控制
转载自零度_PHP的博客
扫一扫
990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
