Html CSS：页眉、页脚和可显示的主要内容区域_Html_Css_Layout_Stretch_Stretching

Html CSS：页眉、页脚和可显示的主要内容区域

html css layout

Html CSS：页眉、页脚和可显示的主要内容区域,html,css,layout,stretch,stretching,Html,Css,Layout,Stretch,Stretching,我想要一个页眉高120px，页脚高120px的网页，以及最小高度为600px的主内容，但当浏览器处于垂直拉伸超过840px的高度（或用户使用 Firefox上的“控件减号”），我希望身体垂直伸展填充除页眉和页脚空间之外的所有可用空间以下是我尝试过的： <header>This is the header.</header> <div id="mainContent">This is the main content.</div> <f

我想要一个页眉高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>

以下是完整的代码：

<!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>


无标题文件
标题{高度：120px；背景：红色；}
div#主要内容{高度：100%；背景：绿色；}
页脚{高度：120px；背景：蓝色；}
这是标题。
这是主要内容。
这是页脚。

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

谢谢。

将身体尺寸更改为一个百分比，你不能拥有px尺寸和百分比，它们不能一起工作

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

我试过你的解决办法。请参见上面的代码。人们可能会认为100%的高度会扩展到视口中的所有可用空间，将页脚推到底部，但事实并非如此。这不管用。请发布正确的修复。由于没有人回答此问题，这是否意味着无法通过拉伸主要内容区域来垂直拉伸HTML页面，因此如果页面高度太小，则拉伸此高度以填充整个视口？即使不使用jQuery，是否也无法获取视口高度，从而操纵DOM来填充可用空间？

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