CSS如何獲得頁眉和頁腳之間的高度？

我有一個總是有100％高度的網站。頁眉和頁腳總是有一個固定的高度。首先是一些代碼：CSS如何獲得頁眉和頁腳之間的高度？

CSS

#header { height: 50px; } 
#footer { position: absolute; bottom: 0px; height: 20px; }

HTML

<!-- in the body tag --> 
<div id="header">Header</div> 
<div id="content-Left"></div> 
<div id="content-Right"></div> 
<div id="footer"></div>

編輯：正如你可以看到我有頁眉和頁腳之間的DIV內容（左，右）。我希望這些div填充頁眉和頁腳之間的所有空間。內容左側div必須始終顯示從頁眉到頁腳的右側邊框。我怎樣才能做到這一點？

來源

2009-09-23 Martijn

我建議解決這個問題這樣的：

#header { 
     position: fixed; 
     top: 0px; 
     left: 0px; 
     width: 100%; 
     height: 50px; 
     } 

#footer { 
     position: fixed; 
     bottom: 0px; 
     left: 0px; 
     width: 100%; 
     height: 20px; 
     } 

#content-Left { 
     position: fixed; 
     top: 50px; /* Close to the Header */ 
     bottom: 20px; /* Scales the Div down upon the Footer */ 
     left: 0px; /* Position it to the left */ 
     width: 50%; 
     overflow: auto; /* Makes the Content scrollable if its required */ 
     border-right: 1px solid #000000; 
     /* Border as required - just change size,type and color as you want */ 
     } 

#content-Right { 
     position: fixed; 
     top: 50px; /* Close to the Header */ 
     right: 0px; /* Position it to the right */ 
     bottom: 20px; /* Scales the Div down upon the Footer */ 
     width: 50%; 
     overflow: auto; /* Makes the Content scrollable if its required */ 
     }

來源

2009-09-23 11:55:03 wildhaber

我編輯了我的帖子。我不想讓我的頁面滾動。內容正確的div會溢出。上面的 – Martijn 2009-09-23 12:02:12

請找到我編輯的CSS代碼。這個解決方案確實模擬了一個「框架」 - 佈局。我個人不建議創建這樣的佈局，因爲當用戶改變窗口大小時，內容不可見。 – wildhaber 2009-09-23 12:16:17

是的，這是我必須解決的另一方面。你如何避免這個問題，但仍然保持概念？ – Martijn 2009-09-23 12:19:26

固定頁腳，沒有JavaScript的，對不對？

將所有東西都包裹在<div id="container"></div>中。在你的CSS：

*, body {margin: 0; padding: 0;} 
#container {display: block; position: absolute; min-height: 100%;} 
#content-Left {border-right: 1px solid #000; } 
#footer {position: absolute; display: block; bottom: 0; height: 3em }

如果你有一個IE6的樣式表已經，補充一點：

body, #container {height: 100%;}

如果沒有，創建一個或者添加到您的HTML文檔的頭：

<!--[if lt IE 7]> <style>body, #container {height: 100%;}</style> <![endif]-->

應該這樣做。

來源

2009-09-23 18:01:28 rhodesjason

CSS如何獲得頁眉和頁腳之間的高度？

回答

相關問題