html - CSS:如何设置正文元素的高度以填充总高度的其余部分，不包括可变长度的页眉和页脚

Question

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

这是我正在尝试的，Jsfiddle 是 http://jsfiddle.net/yoshiokatsuneo/C53J3/

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


<div class="content">
    <img src="http://mrg.bz/ccyR3V" class="header">
    <img src="http://mrg.bz/qmVoy1" class="main">
    <div class="footer">
    Here is footer. height is not fixed.
    </div>
</div>    

在这个 jsfiddle 中，我想让主要元素填充在页眉和页脚之间。

有什么想法吗？

Answer 1

使用CSS tables :

FIDDLE

...此外，主要内容不必是 img，它可以是 div an ,a 等.

FIDDLE

* {
    margin:0;padding:0;
}
html, body {
    height: 100%;
}
.header {
    height: 30px;
    width: 100%;
}
.mainWpr {
    height: 100%;
}
.main {
    width: 100%;
    height: 100%;
}
.footer {
    width: 100%;
}
.content {
    height: 100%;
    width: 100%;
    display:table;
}
.content > div {
    display:table-row;
}

<div class="content">
    <div>
        <img src="http://mrg.bz/ccyR3V" class="header" />
    </div>
    <div class="mainWpr">
        <img src="http://mrg.bz/qmVoy1" class="main" />
    </div>
    <div>
        <div class="footer">
            Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer..</div>
    </div>
</div>