Html CSS：如何设置body元素的高度以填充除可变长度页眉和页脚之外的总高度的其余部分

我想制作一个html全屏页面，页面的页眉、主元素和页脚元素填充窗口高度。 我想用主要元素来填充剩下的高度。所以，主元素的高度应该是（窗口高度-页眉高度-页脚高度）。 页眉和页脚高度不固定。 我可以使用JavaScript使其工作，但我觉得如果可能的话，通过CSS平滑调整大小会更好

这就是我正在尝试的，JSFIDLE就是

.header{
高度：30px；
宽度：100%；
}
梅因先生{
位置：绝对位置；
宽度：100%；
身高：50%；
}
.页脚{
位置：绝对位置；
底部：0px；
宽度：100%；
}
.内容{
位置：绝对位置；
身高：100%；
宽度：100%；
}
这是页脚。高度不是固定的。

在这个JSFIDLE中，我希望在页眉和页脚之间填充主元素

---

有什么想法吗？

你能详细说明你的问题和你想要达到的目标吗。 也请试试这个

.header{
position: absolute;
top: 0px;
height: 30px;
width: 100%;
}
.main{
position: absolute;
top: 30px;
width: 100%;
height: 100%;
}
.footer{
position: fixed;
bottom: 100px;
width: 100%;

}
.content{
position: absolute;
height: 100%;
width: 100%;
}

使用：

…而且，主要内容不必是

img

，它可以是

div

an、

a

等

*{
边距：0；填充：0；
}
html，正文{
身高：100%；
}
.标题{
高度：30px；
宽度：100%；
}
.mainWpr{
身高：100%；
}
梅因先生{
宽度：100%；
身高：100%；
}
.页脚{
宽度：100%；
}
.内容{
身高：100%；
宽度：100%；
显示：表格；
}
.content>div{
显示：表格行；
}

这是页脚。高度不是固定的。这是页脚。高度不是固定的。这是页脚。高度不是固定的。这是页脚。高度不是固定的。这是页脚。高度不是固定的。这是页脚。高度不是固定的。这是页脚。高度不是固定的。这是页脚。高度不是固定的。这是页脚。。

您计划针对哪些浏览器？（现代？）还有。。。你没有指出最重要的事情：那主要的区域呢？滚动怎么样？如果内容超过主高度怎么办？比基特应该去哪里？只有当你确切地知道你需要什么并且涵盖了所有的可能性时，你才能期待一个好的答案。@RokoC.Buljan我假设像Safari7这样的现代HTML5浏览器。我想填充页眉和页脚之间的主区域。我不想有滚动区域。我假设“页眉+主要部分+页脚”可以在高度范围内。我想让页面像一个窗口本地应用程序，所有元素都固定在窗口内。因此，基本上，如果我滚动主要内容，页脚将始终保持原位（在底部可见）？看，我正在尝试帮助，如果你不参与，你将失去人们帮助你的兴趣…这并不是我想要的。在此代码中，主元素的高度与窗高度相同。但是，我想将“main+header+footer”元素的高度设置为窗口高度。我认为konnection达到了您的要求。对吗？不确定，但是制作的JSFIDLE konnection并不完美。谢谢。但是，除了ing之外，它不适用于其他类型，比如文本区域@TsuneoYoshioka-请注意，您在问题中给出的示例是一个img…@TsuneoYoshioka-您只需要使用一个块元素，如

div

，作为主元素或添加

显示：block

-以下是一个示例：它神奇地工作！而且，我不明白它为什么会起作用。我想关键在于身高：100%在.mainWpr。“100%”是什么意思？100%什么？@TsuneoYoshioka-在表格中，当其中一行设置了高度：100%时，这确保它占用了其他行的“剩余高度”

.header{
position: absolute;
top: 0px;
height: 30px;
width: 100%;
}
.main{
position: absolute;
top: 30px;
width: 100%;
height: 100%;
}
.footer{
position: fixed;
bottom: 100px;
width: 100%;

}
.content{
position: absolute;
height: 100%;
width: 100%;
}