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

標籤：

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

方法1

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

#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}

這個方法看起來很完美，只要我們記得清除浮動(這裡我用了最簡單的方法)，那footer也不會錯位。而且無論content和sidebar誰更長，都不會對布局造成影響.但實際上這個方法有個很老火的限制——html中sidebar必須在content之前！

方法2：

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

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

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

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

其實這與footer無關，而是因為wrap對sidebar的無視造成的——你再長，我還是沒感覺。

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

方法3：

float與margin齊上陣

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

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

多了一層div

方法4：

標準瀏覽器的方法

把wrap設為display:table並指定寬度100%,然後把content+sidebar設為display:table-cell;然後只給sidebar指定一個寬度，那麼content的寬度就變成自適應了。代碼很少，而且不會有額外標籤。不過這是IE7都無效的方法。

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