摘要：頁面布局中經(jīng)常用會(huì)遇到左側(cè)寬度自適應(yīng)，右側(cè)固定寬度，或者左側(cè)寬度固定，右側(cè)自適應(yīng)。一般固定寬度是導(dǎo)航欄，自適應(yīng)寬度的是主體內(nèi)容顯示區(qū)。

頁面布局中經(jīng)常用會(huì)遇到左側(cè)寬度自適應(yīng)，右側(cè)固定寬度，或者左側(cè)寬度固定，右側(cè)自適應(yīng)?？傊褪且贿吂潭▽挾龋贿呑赃m應(yīng)寬度。

一般固定寬度是導(dǎo)航欄，自適應(yīng)寬度的是主體內(nèi)容顯示區(qū)。

所以要實(shí)現(xiàn)這種布局，就先給出如下html結(jié)構(gòu)：

    
導(dǎo)航區(qū)域
    
主體內(nèi)容顯示區(qū)域

footer保證前面的不會(huì)影響此元素的顯示

container用于包裹sidebar與main，footer用來測試前面的布局不會(huì)影響footer的正常顯示，如果footer樣式不對，說明我們的布局是有問題的。

接下來看常見的幾種布局方法：

.container {
    overflow: hidden;
    *zoom: 1;
}

.sidebar {
    float: right;
    width: 300px;
    background: #333;
}

.main {
    margin-right: 320px;
    background: #666;
}

.footer {
    margin-top: 20px;
    background: #ccc;
}

其中，sidebar讓它浮動(dòng)，并設(shè)置了一個(gè)寬度；而main沒有設(shè)置寬度。

大家要注意html中必須使用div標(biāo)簽，不要妄圖使用什么p標(biāo)簽來達(dá)到目的。因?yàn)閐iv有個(gè)默認(rèn)屬性，即如果不設(shè)置寬度，那它會(huì)自動(dòng)填滿它的父標(biāo)簽的寬度。這里的main就是例子。

當(dāng)然我們不能讓它填滿了，填滿了它就不能和sidebar保持同一行了。我們給它設(shè)置一個(gè)margin。由于sidebar在右邊，所以我們設(shè)置main的margin-right值，值比sidebar的寬度大一點(diǎn)點(diǎn)——以便區(qū)分它們的范圍，例子中是320。

假設(shè)main的默認(rèn)寬度是100%，那么它設(shè)置了margin后，它的寬度就變成了100%-320，此時(shí)main發(fā)現(xiàn)自己的寬度可以與sidebar擠在同一行了，于是它就上來了。

而寬度100%是相對于它的父標(biāo)簽來的，如果我們改變了它父標(biāo)簽的寬度，那main的寬度也就會(huì)變——比如我們把瀏覽器窗口縮小，那container的寬度就會(huì)變小，而main的寬度也就變小，但它的實(shí)際寬度100%-320始終是不會(huì)變的。

這個(gè)方法看起來很完美，只要我們記得清除浮動(dòng)(這里我用了最簡單的方法)，那footer也不會(huì)錯(cuò)位。而且無論main和sidebar誰更長，都不會(huì)對布局造成影響。

但實(shí)際上這個(gè)方法有個(gè)很老火的限制——html中sidebar必須在main之前！

但我需要sidebar在main之后！因?yàn)槲业膍ain里面才是網(wǎng)頁的主要內(nèi)容，我不想主要內(nèi)容反而排在次要內(nèi)容后面。

但如果sidebar在main之后，那上面的一切都會(huì)化為泡影。

可能有的人不理解，說你干嘛非要sidebar在后面呢？這個(gè)問題說來話長，反正問題就是——main必須在sidebar之前，但main寬度要自適應(yīng)，怎么辦？

下面有兩個(gè)辦法，不過我們先把html結(jié)構(gòu)改成我們想要的樣子：

    
主體內(nèi)容顯示區(qū)域
    
導(dǎo)航區(qū)域

我們把sidebar扔掉，只對main設(shè)置margin，那么我們會(huì)發(fā)現(xiàn)main的寬度就已經(jīng)變成自適應(yīng)了——于是main對sidebar說，我的寬度，與你無關(guān)。

main很容易就搞定了，此時(shí)來看看sidebar，它迫不得已拋棄了float。我們來看看sidebar的特點(diǎn)：在右邊，寬度300，它的定位對main不影響——很明顯，一個(gè)絕對主義分子誕生了。

于是我們的css如下：

.container {
    position: relative;
}

.sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    background: #333;
}

.main {
    margin-right: 320px;
    background: #666;
}

這段css中要注意給container加上了相對定位，以免sidebar太絕對了跑到整個(gè)網(wǎng)頁的右上角而不是cintainer的右上角。

好像完成了？在沒有看footer的表現(xiàn)時(shí)，我很欣慰。我們來把sidebar加長100px。

咦，好像不對，footer怎么還是在那兒呢？怎么沒有自動(dòng)往下走呢？footer說——我不給絕對主義者讓位！

其實(shí)這與footer無關(guān)，而是因?yàn)閏ontainer對sidebar的無視造成的——你再長，我還是沒感覺。

看來這種定位方式只能滿足sidebar自己，但對它的兄弟們卻毫無益處。

經(jīng)過前面的教訓(xùn)，我們重新確立了這個(gè)自適應(yīng)寬度布局必須要達(dá)成的條件：

1.sidebar寬度固定，main寬度自適應(yīng)
2.main要在sidebar之前
3.后面的元素要能正常顯示，不能受影響

由于絕對定位會(huì)讓其他元素?zé)o視它的存在，所以絕對定位的方式必須拋棄。

如果main和sidebar一樣，都用float，那main的自適應(yīng)寬度就沒戲了;如果不給main加float，那sidebar又會(huì)跑到下一行去。

所以，最終我決定：float與margin都用。

我打算把main的寬度設(shè)為100%,然后設(shè)置float:left，最后把它向左移動(dòng)320，以便于sidebar能擠上來。

但這么一來main里面的內(nèi)容也會(huì)跟著左移320像素，導(dǎo)致被遮住了，所以我們要把它重新擠出來。為了好擠，我用了一個(gè)額外的div包裹住內(nèi)容，所以html結(jié)構(gòu)變成了這種樣子：

    

        
主體內(nèi)容顯示區(qū)域
    
    
導(dǎo)航區(qū)域
    

css則變成這樣：

.main {
    float: left;
    width: 100%;
    margin-left: -320px;
}

.main_container {
    margin-left: 320px;
}

.sidebar {
    float: right;
    width: 300px;
}    

這樣一改，真正的“main”就變成了main_container，它的寬度跟以前的main一樣，是100%-320。

大家可能注意到了代碼中的兩個(gè)margin-left，一個(gè)-320px一個(gè)320px，最后結(jié)合起來相當(dāng)于什么都沒干，著實(shí)蛋疼。但它確實(shí)解決了main與sidebar的順序問題。

這個(gè)方法的缺點(diǎn)就是：太怪異，以及額外多了一層div。

當(dāng)然，以不折騰人為標(biāo)準(zhǔn)的w3c標(biāo)準(zhǔn)早就為我們提供了制作這種自適應(yīng)寬度的標(biāo)準(zhǔn)方法。那就簡單了：把container設(shè)為display:table并指定寬度100%,然后把main+sidebar設(shè)為display:table-cell;然后只給sidebar指定一個(gè)寬度，那么main的寬度就變成自適應(yīng)了。

.container {
    display: table;
    width: 100%;
}

.main {
    display: table-cell;
}

.sidebar {
    display: table-cell;
    width: 300px;
}

代碼很少，而且不會(huì)有額外標(biāo)簽。不過這是IE7都無效的方法。

如果不考慮ie7及以下版本，則使用標(biāo)準(zhǔn)方法；如果不在意sidebar與main的順序，則用第一種方法；否則用第3種方法。

以上代碼都沒在IE6測試，有問題不負(fù)責(zé)解釋。個(gè)人覺得，讓IE6壽終正寢的辦法就是——從此不再理它。

參考文章：http://jo2.org/css-auto-adapt...