創建固定高度的水平格與流體一

我想建立一個基地三行的佈局：標題，內容和頁腳格。兩個最外面的div的高度是固定的;中心div必須是流暢的，並適應瀏覽器屏幕的高度。創建固定高度的水平格與流體一

Sample of layout

有人能指出我在正確的方向如何適當CSS解決呢？ ~~現在我還沒有對JavaScript解決方案感興趣。~~ 由於CSS沒有提供乾淨的答案，JavaScript解決方案非常出色！

這是多遠我就來了：

<div id='header'>Header</div> 
    <div id='content'> 
     <div id='innerContent'> 
      This is the fluid part 
     </div> 
    </div> 
<div id='footer'>footer</div>

CSS：

#header { 
    position:absolute; 
    top:0px; 
    left:0px; 
    height:100px; 
    z-index:5; 
} 
#content { 
    position:absolute; 
    top:0px; 
    left:0px; 
    height:100%; 
    z-index:2; 
} 
#innerContent { 
    margin-top:100px; 
    height:100%; 
} 
#footer { 
    height:400px; 
}

來源

2012-04-14 stUrb

你想頁眉和頁腳總是在看，無論主要內容是否已滾動？ – 2012-04-15 00:03:11

不，他們不必固定在瀏覽器屏幕上！ – stUrb 2012-04-15 00:04:08

如何關於一些JavaScript？ – Starx 2012-04-15 01:17:24

編輯：對不起，我感到尷尬。我在一年前做了類似的事情，但起初我並不認爲有可能根據這種情況進行調整。顯然是這樣。

正如我以爲其他人已經說過，可以通過絕對定位將頁腳div放在底部。問題在於當內容div變大時調整它的位置。由於頁腳是絕對定位的，它不會跟隨內容div的流動，這使得即使內容擴展，它仍然保持在同一個位置。

訣竅是將所有東西都包裹在絕對定位的div中。如果內容變大，它將展開，並且頁腳div將根據包裝的邊框而不是文檔的邊框進行定位。

這是代碼。嘗試在內容div中添加一堆<br />標籤，你會發現一切都在調整。

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Layout test</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    #wrapper { 
     min-height: 100%; 
     min-width: 100%; 
     position: absolute; 
    } 

    #header { 
     height: 100px; 
     background-color: red; 
    } 

    #content { 
     background-color: gray; 
     margin-bottom: 50px; 
    } 

    #footer { 
     height: 400px; 
     min-width: 100%; 
     position: absolute; 
     bottom: 0px; 
     margin-bottom: -350px; 
     background-color: blue; 
    } 

    </style> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id='header'>Header</div> 
     <div id='content'> 
      Content 

     </div> 
     <div id='footer'>footer</div> 
    </div> 
</body> 
</html>

ORIGINAL： ~~可悲的是，CSS缺乏乾淨的方式來做到這一點。~~你不知道viewport高度（你叫h），因此不能計算h-100-50你必須建立你的網站，以便大多數人會看到50px的頁腳div。要做到這一點的方法是爲內容div設置最小高度。

最小高度值必須從某個標準視口高度派生。谷歌實驗室發表了關於視窗尺寸他們的訪客的數據，並在這裏取得的一個偉大的可視化： http://browsersize.googlelabs.com/

我設計我自己的口中，這是620px高（據谷歌〜80％有此視口的高度）。因此，內容div的最小高度應爲620-100-50 = 470像素。

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Layout test</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    #header { 
     height: 100px; 
     background-color: red; 
    } 

    #content { 
     min-height: 470px; 
     background-color: gray; 
    } 

    #footer { 
     height: 400px; 
     background-color: blue; 
    } 

    </style> 
</head> 
<body> 
    <div id='header'>Header</div> 
    <div id='content'> 
     Content 
    </div> 
    <div id='footer'>footer</div> 
</body> 
</html>

來源

2012-04-15 01:11:46

您有爲其全部定義的高度。 – Starx 2012-04-15 01:16:26

+1用於引用Google統計數據，以及一個很好的乾淨答案。值得注意的是，如果允許使用JavaScript，可以將腳本寫入並綁定到瀏覽器大小調整事件，以確保內容始終是其大小的100％，而不是頁眉/頁腳。就像你所說的那樣，CSS並沒有自己處理這個問題。 – 2012-04-15 02:01:18

@Starx我不確定你的意思是「所有」？ – 2012-04-15 03:25:31