何為高度自適應？
高度自適應就是高度能跟隨瀏覽器視窗的大小改變而改變，典型的運用在一些後台介面中上面一欄高度固定用作功能表列或導覽列，下面一欄高度自適應用於顯示內容。高度自適應不像寬度自適應那樣簡單，在相容瀏覽器方面也稍微複雜一些。
布局思路
在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
推廣
這種方法也適用於頂欄與底欄高度固定，中間那欄高度自適應的三欄布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
