我想要一个网页的页眉高度为 120 像素，页脚高度为 120 像素，主要内容的最小高度为 600 像素，但是当浏览器垂直拉伸超过 840 像素时（或者用户使用“控制减号”缩小" 在 Firefox 上），我希望正文垂直拉伸以填充所有可用空间减去页眉和页脚空间。
这是我尝试过的：
<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>
达到我所追求的效果的正确方法是什么。
谢谢。