何為高度自適應？
高度自適應就是高度能跟隨瀏覽器窗口的大小改變而改變，典型的運用在一些后台界面中上面一欄高度固定用作菜單欄或導航欄，下面一欄高度自適應用於顯示內容。高度自適應不像寬度自適應那樣簡單，在兼容瀏覽器方面也稍微復雜一些。
布局思路
在IE7+及chrome、firefox等瀏覽器中，高度自適應可以利用絕對定位來解決。但一個元素是絕對定位時，如果沒有給它設定高度或寬度，則它的的高度和寬度是由它的top、right、bottom、left屬性決定的，但這一法則在IE6中並不適用，因此在IE6中還得另辟蹊徑。在IE6中給html設定padding,並不會撐大html元素的尺寸，這正是我們要利用的地方。
在IE7+ 和 W3C瀏覽器中的方案
看下代碼：
再看下效果：
在IE6中的方案
好吧，不想再對IE6吐槽，只想盡快搞定它。
在IE6中的思路是，把html和body元素的高度設定為100%，即瀏覽器窗口的高度，然后利用padding-top在html元素上擠出一點空間來，因為絕對定位的最高參照物是參照html元素的，所以可以把頂欄絕對定位在html的padding-top那塊空間上。這時body的高度就是html的高度（也是瀏覽器窗口的高度）減去html的padding-top的值，這也是ie6非常奇怪的一個特性，因為按照w3c盒模型來講，增加了html元素的padding-top,則html元素的高度也會相應增加，這時瀏覽器窗口應該會出現垂直滾動條了。但IE6不會，html的增加了padding-top后，整個html元素的高度還是保持不變，即瀏覽器窗口的高度，變化的是body的高度減小了，用來抵消html的padding-top.
還是先看看代碼吧：
再看下效果：
最終的兼容代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自適應布局</title>
<style>
html,body{ height:100%;}
body,div{ margin:0; padding:0; color:#F00;}
* html{ padding-top:100px;}/*for ie6*/
.top{ background:#36C; height:100px;}
* html .top{ background:#36C; height:100px; position:absolute; top:0; width:100%;}/*for ie6*/
.main{ background:#F90; position:absolute; width:100%; top:100px; bottom:0; overflow:auto;}
* html .main{ background:#F90; position:static; height:100%;}/*for ie6*/
</style>
</head>
<body>
<div class="top">我是top，固定高度</div>
<div class="main">我是main，高度隨瀏覽器大小變化而變化<p style="height:500px;"></p></div>
</body>
</html>
效果圖：
非ie6
ie6
推廣
這種方法也適用於頂欄與底欄高度固定，中間那欄高度自適應的三欄布局