网站建设之网页布局小技巧:让页眉始终保持底部的方法
        有时候,我们用网页创建一个高度自适应布局,如何保证页眉(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。我看过一些利用绝对定位的例子,但总感觉不是那么完美,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法,兼容IE5.0+,Opera 8.5+,Firefox 1.5+。下面我们看步骤:
        1、为了让浏览器识别高度100%我们需要先给html和body加上一个高度值,同时清除所有元素的margin和 padding。顺便提一下,经过我的测试,html 和body的height:100%;等于整个浏览器窗口的总高度,无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的高度。如何,是不是有点不好理解?
        * {margin: 0;padding: 0;}
        html, body {height: 100%;}
        2、因为上面提到的问题,所以为了让布局自适应高度,我们要加上min-height:100%;,虽然IE不支持这个属性但是IE的height:100%;有同样的作用:
        #wrapper {min-height: 100%;}
        * html #wrapper {height: 100%;}
        这样,一个最简单的最小高度满一屏的自适应布局就做好了。为了便于查看,我加了一些宽度和背景色修饰,如下:
        * {margin: 0;padding: 0;}
        html, body {height: 100%;text-align: center;font: 12px/1.4 Verdana, sans-serif;background: #f00;}
        #wrapper {width: 770px;min-height: 100%;background: #ccc;margin: auto;text-align: left;}
        html #wrapper {height: 100%;}

上一篇：浅谈企业网站建设的原

[返回列表]

下一篇：网站图片优化的几个策