1. 程式人生 > >[轉]css實現左側寬度自適應,右側固定寬度

[轉]css實現左側寬度自適應,右側固定寬度

原文地址:https://segmentfault.com/a/1190000008411418

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

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

所以要實現這種佈局,就先給出如下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。

clipboard.png

咦,好像不對,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; } 

clipboard.png

程式碼很少,而且不會有額外標籤。不過這是IE7都無效的方法。

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

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

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