https://blog.csdn.net/qq_22889599/article/details/78414040

反過來也可以：左側(cè)寬度固定，右側(cè)自適應。不管是左是右，反正就是一邊寬度固定，一邊寬度自適應。

這種布局比較常見，博客園很多默認主題就是這種。一般情況下，這種布局中寬度固定的區(qū)域是側(cè)邊欄，而自適應的區(qū)域是主體內(nèi)容區(qū)——相信把側(cè)邊欄搞成自適應的人很少吧？

要實現(xiàn)這種布局，也算比較簡單。我們先給出html結(jié)構(gòu)：

1 2 3 4 5

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

代碼中的#wrap的div，是用來包裹我們要定位的這兩個區(qū)的；他后面還有個#footer，用來測試在前面的定位搞定后會不會導致后面的div錯位——如果錯位了，那證明我們的定位方法必須改進。

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

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

我們拿右邊定寬左邊自適應來做示范,CSS代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13

#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的寬度大一點點——以便區(qū)分他們的范圍。例子中是310.

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

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

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

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

但我需要sidebar在content之后！因為我的content里面才是網(wǎng)頁的主要內(nèi)容，我不想主要內(nèi)容反而排在次要內(nèi)容后面。

但如果sidebar在content之后，那上面的一切都會化為泡影。

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

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

1 2 3 4

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

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

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

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

于是我們的css如下：

1 2 3 4 5 6 7 8 9

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

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

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

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

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

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

3，float與margin齊上陣

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

sidebar寬度固定，content寬度自適應

content要在sidebar之前

后面的元素要能正常定位，不能受影響

由于絕對定位會讓其他元素無視他的存在，所以絕對定位的方式必須拋棄。

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

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

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

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

1 2 3 4 5 6 7 8

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

css則變成這樣：

1 2 3 4 5 6 7 8 9

#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，最后結(jié)合起來相當于什么都沒干，著實蛋疼。但他確實解決了content與sidebar的順序問題。

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

4，標準瀏覽器的方法

當然，以不折騰人為標準的w3c標準早就為我們提供了制作這種自適應寬度的標準方法。那就簡單了：把wrap設為display:table并指定寬度100%,然后把content+sidebar設為display:table-cell;然后只給sidebar指定一個寬度，那么content的寬度就變成自適應了。

代碼很少，而且不會有額外標簽。不過這是IE7都無效的方法。

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

如果不考慮ie7及以下版本，則使用標準方法；如果不在意sidebar與content的順序，則用第一種方法；否則用第3種方法。

以上代碼都沒在IE6測試，有問題不負責解釋。個人覺得，讓IE6壽終正寢的辦法就是——從此不再理他。

轉(zhuǎn)載于:https://www.cnblogs.com/rxbook/p/10661709.html

總結(jié)

以上是生活随笔為你收集整理的css实现右侧固定宽度，左侧宽度自适应的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。