Question

我想要一个网页，标题为120px高，页脚高120px，和最小高度为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>

达到我所追求的效果的正确方法是什么。

感谢。

Answer 1

将体型更改为可以具有px大小和百分比的百分比，它们不能一起使用。

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

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

1 个答案: