老生長談，溫故知新：css實現右側固定寬度，左側寬度自適應

反過來也能夠：左側寬度固定，右側自適應。不論是左是右，反正就是一邊寬度固定，一邊寬度自適應。

這種佈局比較常見，博客園不少默認主題就是這種。通常狀況下，這種佈局中寬度固定的區域是側邊欄，而自適應的區域是主體內容區——相信把側邊欄搞成自適應的人不多吧？

要實現這種佈局，也算比較簡單。咱們先給出html結構：

<div id="wrap">
  <div id="sidebar" style="height:240px;">固定寬度區</div>
  <div id="content" style="height:340px;">自適應區</div>
</div>
<div id="footer">後面的一個DIV，以確保前面的定位不會致使後面的變形</div>

　　

代碼中的#wrap的div，是用來包裹咱們要定位的這兩個區的；他後面還有個#footer，用來測試在前面的定位搞定後會不會致使後面的div錯位——若是錯位了，那證實咱們的定位方法必須改進。

下面列舉幾個常見的方法：

1，固定寬度區浮動，自適應區不設寬度而設置 margin

咱們拿右邊定寬左邊自適應來作示範,CSS代碼以下：

#wrap {
    overflow: hidden; *zoom: 1;
  }
  #content ,#sidebar {
    background-color: #eee; 
  }
  #sidebar {
    float: right; width: 300px;
  }
  #content {
    margin-right: 310px;
  }
  #footer {background-color: #f00;color:#fff; margin-top: 1em}

 

其中，sidebar讓他浮動，並設置了一個寬度；而content沒有設置寬度。

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

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

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

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

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

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

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

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

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

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

<div id="wrap">
  <div id="content" style="height:340px;">自適應區，在前面</div>
  <div id="sidebar" style="height:240px;">固定寬度區</div>
</div>

　　

2，固定寬度區使用絕對定位，自適應區照例設置margin

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

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

因而咱們的css以下：

#wrap {
    *zoom: 1; position: relative;
  }
  #sidebar {
    width: 300px; position: absolute; right: 0; top: 0;
  }
  #content {
    margin-right: 310px;
  }

 

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

好像完成了？在沒有看footer的表現時，我很欣慰。咱們來把sidebar加長——增加100px！不要一年，只要一條內褲！哦，，，只要一句代碼。

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

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

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

3，float與margin齊上陣

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

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

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

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

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

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

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

<div id="wrap">
  <div id="content" style="height:140px;">
    <div id="contentb">
      content自適應區，在前面
    </div>
  </div>
  <div id="sidebar" style="height:240px;">sidebar固定寬度區</div>
</div>

　　

css則變成這樣：

#sidebar {
    width: 300px; float: right;
  }
  #content {
    margin-left: -310px; float: left; width: 100%;
  }
  #contentb {
    margin-left: 310px;
  }

 

這樣一改，真正的「content」就變成了contentb，他的寬度跟之前的content同樣，是100%-310.

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

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

4，標準瀏覽器的方法

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

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

———————割尾巴————————-

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

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