对于不同分辨率，css中的height,width属性值自适应

摘自http://www.sosuo8.com/article/show.asp?id=2784

  

css高度自适应的解决方法

以下内容摘自《CSS商业网站布局之道》一书。

 网页布局中经常需要定义元素的高度和宽度，但很多时候我们希望元素的大小能够根据窗口或父元素自动调整，这就是我们常挂在嘴边的元素自适应。元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。 

       元素宽度自适应设置起来比较轻松，只需要为元素的width属性定义一个百分比即可，且目前各大浏览器对此都完全支持。不过问题是元素高度自适应很容易让人困惑，设置起来比较麻烦。我们在前面也介绍过很多高度自适应的技巧，但都不是最完美的方法，既然元素都可以定义height属性，为什么不用height属性定义百分比来实现高度自适应呢？但是如果直接设置元素高度后却发现height属性并没有起作用，这是为什么呢？ 

例如，看下面一个简单示例，其中XHTML结构代码如下：

CSS 复制代码

"content">
    "sub">高度自适应

  

  

CSS布局代码：

CSS 复制代码

/*[高度不能够自适应，参考示例6-41_1.html]*/
#content {/*<定义父元素显示属性>*/
    background: #B452CD;/*背景色*/
}

#sub {/*<定义子元素显示属性>*/
    width:50%;/*父元素宽度的一半*/
    height:50%;/*父元素高度的一半*/
    background:#C0FE3E; /*背景色*/
}

显示效果：
在IE 6中浏览。宽度能够自适应，高度不能自适应。 


在Firefox 2中浏览。宽度能够自适应，高度不能自适应。 


       这是不是父元素没有显式定义高度呢？是的，如果给它设置一个固定值，其子元素的百分比高度就能够起作用了。很显然这不是我们所要的结果，我们所希望的是子元素的高度能够随窗口而变化，是不是body没有设置高度呢？当设置body的height属性为100%，在IE 6浏览器中可以看到子元素的百分比高度起作用，但在非IE浏览器中看不到效果。继续设置body的父元素html的height属性为100%，这时终于看到了子元素的百分比高度在各大浏览器中起作用了。 

       原来在IE浏览器中html的height属性默认为100%，body没有设置值，而在非IE浏览器中html和body都没有预定义height属性值。因此，解决高度自适应问题可以使用下面的代码： 

CSS布局代码：

CSS 复制代码

/*[高度自适应，参考示例6-41_2.html]*/
html,body {/*<定义html和body高度都为100%，即显式定义html和body高度>*/
    height:100%;
}

#content {/*<定义父元素显示属性>*/
    height:100%;/*满屏显示*/
    background: #B452CD;/*背景色*/
}

#sub {/*<定义子元素显示属性>*/
    width:50%;/*父元素宽度的一半*/
    height:50%;/*父元素高度的一半*/
    background:#C0FE3E; /*背景色*/
}

在IE 6中浏览。高度能自适应。 


在Firefox 2中浏览。高度能自适应。
 

       如果把子元素对象设置为浮动显示或者绝对定位显示，则高度依然能够实现自适应。例如，下面的CSS布局代码：

CSS 复制代码

/*[高度绝对定位自适应，参考示例6-41_2.html]*/
html,body {/*<定义html和body高度都为100%，即显式定义html和body高度>*/
    height:100%;
}

#content {/*<定义父元素显示属性>*/
    height:100%;/*满屏显示*/
    position:relative; /*相对定位*/
    background: #B452CD;/*背景色*/
}

#sub {/*<定义子元素显示属性>*/
    width:50%;/*父元素宽度的一半*/
    height:50%;/*父元素高度的一半*/
    position:absolute; /*绝对定位*/
    background:#C0FE3E; /*背景色*/
}

       高度自适应对于布局具有重要的作用，我们可以利用高度自适应实现很多复杂布局效果。特别是对于绝对定位，突破了原来宽、高灵活性差的难题。充分发挥绝对定位的精确定位和灵活适应的双重能力。不过这种能力还是很有限度的，实践中读者应适当把握，毕竟绝对定位属于层布局模型，它与文档流属于不同的层面。