CSS：页眉、页脚和可伸缩的主要内容区域答案

【问题标题】：CSS: header, footer, and streatchable main content areaCSS：页眉、页脚和可伸缩的主要内容区域
【发布时间】：2013-11-03 22:54:26
【问题描述】：

我想要一个页眉高 120 像素，页脚高 120 像素的网页，和一个主要内容，其最小高度为 600px，但当浏览器是垂直拉伸超过 840px 高度（或用户缩小 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>

达到我想要的效果的正确方法是什么。

谢谢。

【问题讨论】：

标签： html css layout stretch stretching

【解决方案1】：

将正文大小更改为您不能有 px 大小和它们不能一起使用的百分比的百分比。

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

【讨论】：

我已经尝试过您的解决方案。请参阅上面的代码。可以认为 100% 的高度会扩展以填充视口中的所有可用空间，将页脚推到底部，但事实并非如此。这行不通。请发布正确的修复。
既然没有人回答这个问题，是不是意味着没有办法通过拉伸主要内容区域来垂直拉伸HTML页面，所以如果页面高度太小，那么这个高度被拉伸以填充整个视口？有没有办法获得视口高度，从而操纵 DOM 来填充可用空间，甚至不使用 jQuery？