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：页眉，页脚和静态主要内容区域

回答

相关问题