css實現左側寬度自適應，右側固定寬度

頁面佈局中常常用會遇到左側寬度自適應，右側固定寬度，或者左側寬度固定，右側自適應。總之就是一邊固定寬度，一邊自適應寬度。

通常固定寬度是導航欄，自適應寬度的是主體內容顯示區。

因此要實現這種佈局，就先給出以下html結構：

<div class="container">
    <div class="sidebar">導航區域</div>
    <div class="main">主體內容顯示區域</div>
</div>
<div class="footer">footer保證前面的不會影響此元素的顯示</div>

container用於包裹sidebar與main，footer用來測試前面的佈局不會影響footer的正常顯示，若是footer樣式不對，說明咱們的佈局是有問題的。

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

四種佈局：

固定區域浮動，自適應區域不設置寬度但設置margin

.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讓它浮動，並設置了一個寬度；而main沒有設置寬度。

你們要注意html中必須使用div標籤，不要妄圖使用什麼p標籤來達到目的。由於div有個默認屬性，即若是不設置寬度，那它會自動填滿它的父標籤的寬度。這裏的main就是例子。

固然咱們不能讓它填滿了，填滿了它就不能和sidebar保持同一行了。咱們給它設置一個margin。因爲sidebar在右邊，因此咱們設置main的margin-right值，值比sidebar的寬度大一點點——以便區分它們的範圍，例子中是320。

假設main的默認寬度是100%，那麼它設置了margin後，它的寬度就變成了100%-320，此時main發現本身的寬度能夠與sidebar擠在同一行了，因而它就上來了。

而寬度100%是相對於它的父標籤來的，若是咱們改變了它父標籤的寬度，那main的寬度也就會變——好比咱們把瀏覽器窗口縮小，那container的寬度就會變小，而main的寬度也就變小，但它的實際寬度100%-320始終是不會變的。

這個方法看起來很完美，只要咱們記得清除浮動(這裏我用了最簡單的方法)，那footer也不會錯位。並且不管main和sidebar誰更長，都不會對佈局形成影響。

但實際上這個方法有個很老火的限制——html中sidebar必須在main以前！

但我須要sidebar在main以後！由於個人main裏面纔是網頁的主要內容，我不想主要內容反而排在次要內容後面。

但若是sidebar在main以後，那上面的一切都會化爲泡影。

可能有的人不理解，說你幹嗎非要sidebar在後面呢？這個問題說來話長，反正問題就是——main必須在sidebar以前，但main寬度要自適應，怎麼辦？

下面有兩個辦法，不過咱們先把html結構改爲咱們想要的樣子：

<div class="container">
    <div class="main">主體內容顯示區域</div>
    <div class="sidebar">導航區域</div>
</div>

固定區域使用定位，自適應區域不設置寬度但設置margin

咱們把sidebar扔掉，只對main設置margin，那麼咱們會發現main的寬度就已經變成自適應了——因而main對sidebar說，個人寬度，與你無關。

main很容易就搞定了，此時來看看sidebar，它無可奈何拋棄了float。咱們來看看sidebar的特色：在右邊，寬度300，它的定位對main不影響——很明顯，一個絕對主義分子誕生了。

因而咱們的css以下：

.container {
    position: relative;
}

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

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

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

好像完成了？在沒有看footer的表現時，我很欣慰。咱們來把sidebar加長100px。

咦，好像不對，footer怎麼仍是在那兒呢？怎麼沒有自動往下走呢？footer說——我不給絕對主義者讓位！

其實這與footer無關，而是由於container對sidebar的無視形成的——你再長，我仍是沒感受。

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

float與margin齊上陣

通過前面的教訓，咱們從新確立了這個自適應寬度佈局必需要達成的條件：

1.sidebar寬度固定，main寬度自適應
2.main要在sidebar以前
3.後面的元素要能正常顯示，不能受影響

因爲絕對定位會讓其餘元素無視它的存在，因此絕對定位的方式必須拋棄。

若是main和sidebar同樣，都用float，那main的自適應寬度就沒戲了;若是不給main加float，那sidebar又會跑到下一行去。

因此，最終我決定：float與margin都用。

我打算把main的寬度設爲100%,而後設置float:left，最後把它向左移動320，以便於sidebar能擠上來。

但這麼一來main裏面的內容也會跟着左移320像素，致使被遮住了，因此咱們要把它從新擠出來。爲了好擠，我用了一個額外的div包裹住內容，因此html結構變成了這種樣子：

<div class="container">
    <div class="main">
        <div class="main_container">主體內容顯示區域</div>
    </div>
    <div class="sidebar">導航區域</div>
</div>

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。

你們可能注意到了代碼中的兩個margin-left，一個-320px一個320px，最後結合起來至關於什麼都沒幹，着實蛋疼。但它確實解決了main與sidebar的順序問題。

這個方法的缺點就是：太怪異，以及額外多了一層div。

標準瀏覽器的方法：

固然，以不折騰人爲標準的w3c標準早就爲咱們提供了製做這種自適應寬度的標準方法。那就簡單了：把container設爲display:table並指定寬度100%,而後把main+sidebar設爲display:table-cell;而後只給sidebar指定一個寬度，那麼main的寬度就變成自適應了。

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

.main {
    display: table-cell;
}

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

代碼不多，並且不會有額外標籤。不過這是IE7都無效的方法。

若是不考慮ie7及如下版本，則使用標準方法；若是不在乎sidebar與main的順序，則用第一種方法；不然用第3種方法。

以上代碼都沒在IE6測試，有問題不負責解釋。我的以爲，讓IE6壽終正寢的辦法就是——今後再也不理它。

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