高度自適應就是高度能跟隨瀏覽器窗口的大小改變而改變，典型的運用在一些后臺界面中上面一欄高度固定用作菜單欄或導航欄，下面一欄高度自適應用于顯示內容。

在IE7+及chrome、firefox等瀏覽器中，高度自適應可以利用絕對定位來解決。但一個元素是絕對定位時，如果沒有給它設定高度或寬度，則它的的高度和寬度是由它的top、right、bottom、left屬性決定的。

在IE6中的思路是，把html和body元素的高度設定為100%，即瀏覽器窗口的高度，然后利用padding-top在html元素上擠出一點空間來，因為絕對定位的最高參照物是參照html元素的，所以可以把頂欄絕對定位在html的padding-top那塊空間上。

實現高度自適應瀏覽器高度代碼：

高度自適應布局

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*/

我是top，固定高度我是main，高度隨瀏覽器大小變化而變化

效果圖：

非IE6瀏覽器：

IE6瀏覽器：

總結

以上是生活随笔為你收集整理的html图片自适应浏览器高度,css如何高度自适应浏览器高度？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。