免費(fèi)AI編程助手
CSS常用布局之寬高自適應(yīng)
本篇文章將會介紹CSS布局中可能經(jīng)常會遇到寬度或者高度自適應(yīng)問題。
寬度自適應(yīng)
我們經(jīng)常會看到這樣的頁面，左側(cè)（或者右側(cè)）為固定的導(dǎo)航或者菜單欄，另一側(cè)將會隨著瀏覽器的縮放而自適應(yīng)改變其大小。這種布局結(jié)構(gòu)可用于頂層布局結(jié)構(gòu)亦可用于某個局部功能塊，常見于各種web系統(tǒng)（OA系統(tǒng)，ERP系統(tǒng)）等。
上述的場景即是我們所說的寬度自適應(yīng)。常見的有兩列布局或者三列布局（甚至是多列布局）。
這里我們用三列布局來作示例，即左右兩列固定，中間一列寬度自適應(yīng)。
這個其實(shí)很好實(shí)現(xiàn)，左側(cè)列左浮動，右側(cè)列右浮動，中間列不浮動即可。代碼如下，
<head>
<style>
body,div {
margin: 0;
padding: 0;
}
div {
background-color: #f00;
height: 200px;
}
.left {
float: left;
background-color: #00f;
width: 100px;
}
.right {
float: right;
background-color: #0f0;
width: 100px;
}
.center {
background-color: #333;
margin: 0 100px;
width: auto;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</body>效果如下，
上述代碼在現(xiàn)代瀏覽器中是完全沒有問題的，不過在IE6中有些問題，如下，
這個是只有IE6下才會有的問題，有個3px的bug，我們需要對各列的css代碼進(jìn)行一些兼容，
.left {
float: left;
background-color: #00f;
_margin-right: -3px; /*for ie6*/
width: 100px;
}
.right {
float: right;
background-color: #0f0;
_margin-left: -3px; /*for ie6*/
width: 100px;
}
.center {
background-color: pink;
margin: 0 100px;
_margin: 0 97px; /*for ie6*/
width: auto;
}這里有個在線demo。
高度自適應(yīng)
之前有一篇文章（CSS如何讓頁腳固定在頁面底部）其實(shí)就是一種高度自適應(yīng)的實(shí)際應(yīng)用場景。
高度自適應(yīng)的適用場景通常是這樣的，頂欄（或者底欄）需要固定，剩余的部分能夠根據(jù)瀏覽器的大小自適應(yīng)其高度。
在現(xiàn)在瀏覽器中（包括IE7+，Chrome，F(xiàn)irefox等等），高度自適應(yīng)可以利用絕對定位來解決。當(dāng)一個元素的定位屬性是absolute時，它將擺脫默認(rèn)的文檔流，其大小默認(rèn)是元素內(nèi)容的大小，除非手動給其設(shè)置寬高。此時我們亦可通過設(shè)置其位置屬性（top，right，bottom，left）來間接改變元素的寬高。
示例代碼如下，
<head>
<style>
body,div {
margin: 0;
padding: 0;
}
.top {
background-color: #00d;
height: 100px;
}
.main {
background-color: pink;
position: absolute;
top: 100px;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">main</div>
</body>效果如下，
但是上述方案在IE6下是問題的（IE6真是翔一樣的瀏覽器啊!!），如下圖
main塊咋變成這樣了??？這是因?yàn)樯鲜鲈诂F(xiàn)代瀏覽器中高度自適應(yīng)的原理在IE6中并不適用。在IE6中，即使你將一個元素的定位屬性設(shè)置成absolute了，此時改變其位置屬性并不能改變元素的大小。
于是，在IE6中的思路就發(fā)生變化了。
在IE6中的思路是，把html和body元素的高度設(shè)定為100%，即瀏覽器窗口的高度，然后利用padding-top在html元素上擠出一點(diǎn)空間來，因?yàn)榻^對定位的最高參照物是參照html元素的，所以可以把頂欄絕對定位在html的padding-top那塊空間上。在IE6中，此時頁面的html元素的高度并未發(fā)生變化，但是body元素的高度減小了。按照w3c的盒模型來解釋，你給一個未明確寬高的元素設(shè)置內(nèi)間距（padding屬性），此元素將會向外膨脹撐開，使得整個元素的大小增大。但是IE6并沒有按照常理出牌。
下面就是針對IE6的兼容css代碼，
body,div {
margin: 0;
padding: 0;
}
html,body {
_height: 100%;
}
html {
_padding-top: 100px;
}
.top {
background-color: #00d;
height: 100px;
_position: absolute;
_top: 0;
_width: 100%;
}
.main {
background-color: pink;
position: absolute;
top: 100px;
bottom: 0;
left: 0;
right: 0;
_height: 100%;
_width: 100%;
}這里有一個在線demo。
更多建議：