网页布局中经常需要定义元素的高度和宽度，但很多时候我们希望元素的大小能够根据窗口或父元素自动调整，这就是我们常挂在嘴边的元素自适应。元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
元素宽度自适应设置起来比较轻松，只需要为元素的 width 属性定义一个百分比即可，且目前各大浏览器对此都完全支持。不过问题是元素高度自适应很容易让人困惑，设置起来比较麻烦。我们在前面也介绍过很多高度自适应的技巧，但都不是最完美的方法，既然元素都可以定义 height 属性，为什么不用 height 属性定义百分比来实现高度自适应呢？但是如果直接设置元素高度后却发现height 属性并没有起作用，这是为什么呢？
例如，看下面一个简单示例，其中 XHTML 结构代码如下：
CSS 布局代码：
显示效果：
在IE 6 中浏览。宽度能够自适应，高度不能自适应；在Firefox 2 中浏览。宽度能够自适应，高度不能自适应。
这是不是父元素没有显式定义高度呢？是的，如果给它设置一个固定值，其子元素的百分比高度就能够起作用了。很显然这不是我们所要的结果，我们所希望的是子元素的高度能够随窗口而变化，是不是 body 没有设置高度呢？当设置 body 的 height 属性为 100%，在 IE 6 浏览器中可以看到子元素的百分比高度起作用，但在非 IE 浏览器中看不到效果。继 续设置 body 的父元素 html 的 height属性为 100%，这时终于看到了子元素的百分比高度在各大浏览器中起作用了。
原来在IE 浏览器中html 的 height 属性默认为100%，body 没有设置值，而在非IE 浏览器中html和 body 都没有预定义 height 属性值。因此，解决高度自适应问题可以使用下面的代码：
在IE 6 中浏览和Firefox 2 中浏览，高度都能自适应：
如果把子元素对象设置为浮动显示或者绝对定位显示，则高度依然能够实现自适应。如下面的 CSS 布局代码：
提示：您可以先修改部分代码再运行
高度自适应对于布局具有重要的作用，我们可以利用高度自适应实现很多复杂布局效果。特别是对于绝对定位，突破了原来宽、高灵活性差的难题。充分发挥绝对定位的精确定位和灵活适应的双重能力。不过这种能力还是很有限度的，实践中读者应适当把握，毕竟绝对定位属于层布局模型，它与文档流属于不同的层面。
Copyright © 2003- PowerEasy Yahu All Rights Reserved.
