CSS流體佈局？

我有一個關於如何設置我的基本流體佈局的快速問題。我有一個40px高的，頂部100％寬的標題欄，這看起來很棒。CSS流體佈局？

然後我有一個#left和#right div，分別浮動。這看起來很酷。他們都有高度100％，這很好，但問題是頁面然後滾動40px，因爲從標題欄有40px ...如果我使用流體佈局的標題，然後內容框的它看起來很糟糕在一個微小的或非常大的分辨率。

任何想法？

這裏是我的CSS

body 
{ 
    background: #ebebeb; 
    margin: 0; 
    padding: 0; 
    min-width: 750px; 
    max-width: 1500px; 
} 
#wrap 
{ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 
#header 
{ 
    background: #414141; 
    height: 40px; 
    width: 100%; 
} 
#sidebar 
{ 
    width: 30%; 
    background: #ebebeb; 
    height: 100%; 
    float: left; 
} 
#rightcontent 
{ 
    width: 70%; 
    background: #fff; 
    height: 100%; 
    float: right; 
} 
#footer 
{ 
    width: 100%; 
    background: #414141; 
    height: 40px; 
    clear: both; 
}

這裏是我的html頁面：

<body> 
<div id="wrap"> 
    <div id="header"> 
     head 
    </div> 
    <div id="sidebar"> 
     side 
    </div> 
    <div id="rightcontent"> 
     right 
    </div> 
    <div id="footer"> 
     footer 
    </div> 
</div> 
</body>

是否幫助:)

來源

2010-01-16 tarnfeld

height: 100%;爲網頁一件棘手的事情，因爲你是毫無疑問，敏銳地意識到。在Firefox 3.5.7中查看代碼0123'和#rightcontent列的高度只有大約em--這足以容納您放入其中的文本，而不是我認爲您期望的完整頁面長度。這些列正試圖從其父級的顯式高度計算百分比高度，但#wrap也具有基於％的高度，這會導致此失敗（至少在我的Firefox中）。

現在，正如您所描述的（列的高度正確，除了一個額外的40px滾動條），似乎正在發生的事情是，您使用的任何瀏覽器都將#wrap的全高作爲100％這是父母，這是<body>。所以很自然地，當您的列大小設置爲<body>的高度時（也包含頁眉和頁腳的高度），列太高。

我用了幾次，以達到列的整頁長度的外觀，適當地擴展到任何網頁尺寸爲我的網頁的底部貼position: fixed; bottom: 0px;<div>標籤與裏面剛好夠標記一招模仿列的結構和相關的CSS。

這裏就是我做你的頁面來獲得這樣的效果：

<!--Add this to your HTML--> 
<div id='columnfooter'> 
<div id='sidecont'></div> 
    <div id='rightcont'></div> 
</div>

/* And modify your CSS like this */ 
#sidebar, div#sidecont { 
    width: 30%; 
    background: #ebebeb; 
    float: left; 
} 

#rightcontent, div#rightcont { 
    width: 70%; 
    background: #fff; 
    float: right; 
} 

div#rightcont, div#sidecont { 
height:100%; 
} 

#footer { 
    width: 100%; 
    background: #414141; 
    height: 40px; 
    position: relative; 
    bottom: 0px; 
} 

div#columnfooter { 
position: fixed; 
z-index: -25; 
bottom: 40px; 
height: 100%; 
background: #ebebeb; 
width: 100%; 
}

是，使用HTML，形成空背景列這種方式確實一種混合的語義和文體標記 - 一個技術性的否定。但CSS清楚地從HTML中抽象出來，並且使用此代碼，我可以在底部找到整個頁面列，即#footer（即使當多於一頁的內容被添加到上面的任何一列時），並且它的行爲在最新任何分辨率的Firefox，Safari，Opera，Chrome和IE8版本（測試至800x600）。

希望這會有所幫助！

來源

2010-01-17 11:39:50 Impirator

嘿，很好的修復！雖然我最終沒有使用它，因爲我使用javascript來保持這一點，並在用戶調整窗口大小等一些其他事情透視，等等...我知道這可能會導致與非JS瀏覽器的問題，但其餘的網絡應用程序是非常重的JS，所以我有非js瀏覽器問題的地方alreay :-) – tarnfeld 2010-01-17 13:42:22

CSS流體佈局？

回答

相關問題