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