CSS：頁眉，頁腳和靜態主要內容區域

我想要一個網頁，頭部120px高，頁腳120px高，和主內容的最小高度爲600px，但當瀏覽器是（或者用戶在Firefox上縮小爲「control minus」），我希望主體垂直拉伸以填充所有可用空間減去頁眉和頁腳空間。CSS：頁眉，頁腳和靜態主要內容區域

這裏是我的嘗試：

<header>This is the header.</header> 
<div id="mainContent">This is the main content.</div> 
<footer>This is the footer.</footer>

，這是CSS：

header { height: 120px; background: red; } 
div#mainContent { min-height: 600px; height: 100%; background: green; } 
footer { height: 120px; background: blue; }

下面是完整的代碼：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style type="text/css"> 
header { height: 120px; background: red; } 
div#mainContent { height: 100%; background: green; } 
footer { height: 120px; background: blue; } 
</style> 
</head> 
<body> 
<header>This is the header.</header> 
<div id="mainContent">This is the main content.</div> 
<footer>This is the footer.</footer> 
</body> 
</html>

什麼是實現的正確途徑我追到的效果。

謝謝。

來源

2013-10-25 John Sonderson

將身體大小更改爲您無法擁有px大小的百分比以及它們不能一起使用的百分比。

div#mainContent { height: 100%; background: green; }

來源

2013-10-25 01:07:21 Luke14

我試過你的解決方案。請參閱上面的代碼。人們可能會認爲100％的高度會擴大以填充視口中所有可用空間，將頁腳推到底部，但不會。這不起作用。請發佈正確的修復程序。 –

由於沒有人回答過這個問題，這是否意味着無法通過拉伸主內容區域來垂直拉伸HTML頁面，因此如果頁面高度太小，則此高度被拉伸以填充整個視口？有沒有辦法得到視口高度，從而操縱DOM來填充可用空間，甚至不使用jQuery？ –

CSS：頁眉，頁腳和靜態主要內容區域

回答

相關問題