一、寬度自適應
三列布局左右固定、中間不固定或者兩列布局，左邊固定右邊不固定
原文鏈接：http://www.cnblogs.com/2050/archive/2012/07/30/2614852.html
看下代碼結構：
效果為：
中間列要不要設置margin-left和margin-right ?
注意，中間那列需要把左右兩個外邊距分別設為左右兩列的寬度，否則會有些問題。如下：
在谷歌、火狐等標准瀏覽器下是這樣的（包括IE8+）：
而在IE6、IE7中是這樣的（圖是在IE6下截的）
我們可以看到中間那列子元素的margin-left或margin-right的起點是不一致的，在IE6、IE7中，即使不給中間列設定margin-left和margin-right,它的子元素的左右外邊距的起點仍然是在左右兩列寬的的基礎上的，就像是有margin-left和margin-right一樣。所以為了各瀏覽器保持一致，中間那列還是設一個margin-left和margin-right為好。
IE6中的3px間隙bug
在上圖的ie6截圖中，我們看到各列之間有一條3px的間隔，這是只有IE6才有的問題。
如果中間那列的margin-left和margin-right都為0的話，則只要把左列的margin-right設為-3px,右列的margin-left設為-3px就行了。
但如果把中間列的margin-left和margin-right分別為左右兩列的寬度時（上面已經說了，這也是必須這樣做的），即使把左列的margin-right設為-3px,右列的margin-left設為-3px也還是沒有效果。這時候還得把中間列的margin-left設為左列寬度-3px,margin-right設為右列寬度-3px才行。如下：
最終css為:
二、高度自適應
原文鏈接：http://www.cnblogs.com/2050/archive/2012/07/30/2615260.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.
還是先看看代碼吧：
再看下效果：
最終的兼容代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!
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
推廣
這種方法也適用於頂欄與底欄高度固定，中間那欄高度自適應的三欄布局