CSS佈局之-高度自適應

時間 2019-11-24

標籤 css 佈局高度自適應欄目 CSS 简体版

原文原文鏈接

何爲高度自適應？ html

高度自適應就是高度能跟隨瀏覽器窗口的大小改變而改變，典型的運用在一些後臺界面中上面一欄高度固定用做菜單欄或導航欄，下面一欄高度自適應用於顯示內容。高度自適應不像寬度自適應那樣簡單，在兼容瀏覽器方面也稍微複雜一些。 chrome

佈局思路 瀏覽器

在IE7+及chrome、firefox等瀏覽器中，高度自適應能夠利用絕對定位來解決。但一個元素是絕對定位時，若是沒有給它設定高度或寬度，則它的的高度和寬度是由它的top、right、bottom、left屬性決定的，但這一法則在IE6中並不適用，所以在IE6中還得另闢蹊徑。在IE6中給html設定padding,並不會撐大html元素的尺寸，這正是咱們要利用的地方。佈局

在IE7+ 和 W3C瀏覽器中的方案 spa

看下代碼： firefox

再看下效果： 3d

在IE6中的方案 code

好吧，不想再對IE6吐槽，只想儘快搞定它。 htm

在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. blog

仍是先看看代碼吧：

再看下效果：

最終的兼容代碼

<!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>