有时候,我们用CSS创立一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局更下方是一个比拟头疼的事。我看过一些利用尽对定位的例子,但总感到不是那么完善,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个后果的方法,兼容IE5.0+,Opera 8.5+,Firefox 1.5+。下面我们看步骤:
1、为了让浏览器辨认高度**我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 padding。顺便提一下,经过我的测试,html 和 body 的 height: **; 即是全部浏览器窗口的总高度,无论内容是否超过一屏。而它们下一级子元素 height: **; 则即是前几屏的高度。如何,是不是有点不好懂得?
* { margin: 0; padding: 0; } html, body { height: **; }
#wrapper { min-height: **; } * html #wrapper { height: **; }
* { margin: 0; padding: 0; } html, body { height: **; text-align: center; font: 12px/1.4 Verdana, sans-serif; background: #f00; } #wrapper { width: 770px; min-height: **; background: #ccc; margin: auto; text-align: left; } * html #wrapper { height: **; }
更小高度**页脚保持在底部的布局方法,希望对您有参考价值。