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

Sunxb 發布于2019-08-30 15:52 / 2554人閱讀

摘要：頁面布局中經常用會遇到左側寬度自適應，右側固定寬度，或者左側寬度固定，右側自適應。一般固定寬度是導航欄，自適應寬度的是主體內容顯示區。

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

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

所以要實現這種布局，就先給出如下html結構：


    導航區域
    主體內容顯示區域

footer保證前面的不會影響此元素的顯示

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結構改成我們想要的樣子：


    主體內容顯示區域
    導航區域

固定區域使用定位，自適應區域不設置寬度但設置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結構變成了這種樣子：


    
        主體內容顯示區域
    
    導航區域

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...

GPU云服務器云服務器自適應寬度寬度自適應自適應寬度按鈕 rem寬度自適應

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116490.html

css經典布局之左側固定大小右側自動適應

摘要：最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的，進入商家的時候，會出現一堆飯的列表，左側是飯的分類，右側是飯的列表等等。最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的APP，進入商家的時候，會出現一堆飯的列表，...

Carbs 2019-08-29 11:21 評論0 收藏0
css經典布局之左側固定大小右側自動適應

摘要：最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的，進入商家的時候，會出現一堆飯的列表，左側是飯的分類，右側是飯的列表等等。最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的APP，進入商家的時候，會出現一堆飯的列表，...

booster 2019-08-21 14:29 評論0 收藏0
css經典布局之左側固定大小右側自動適應

摘要：最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的，進入商家的時候，會出現一堆飯的列表，左側是飯的分類，右側是飯的列表等等。最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的APP，進入商家的時候，會出現一堆飯的列表，...

GraphQuery 2019-08-01 15:43 評論0 收藏0
七種實現左側固定，右側自適應兩欄布局的方法

摘要：總結一下左邊固定，右邊自適應的兩欄布局的七種方法。基本的樣式是，兩個相距左側寬基本的樣式是，兩個盒子相距左側盒子寬，右側盒子寬度自適應。沒有清除浮動的方法，若左側盒子高于右側盒子，就會超出父容器的高度。總結一下左邊固定，右邊自適應的兩欄布局的七種方法。其中有老生常談的float方法,BFC方法，也有CSS3的flex布局與grid布局。并非所有的布局都會在開發中使用，但是其中也會涉及...

luffyZh 2019-08-29 13:11 評論0 收藏0