Html 固定高度容器分区，灵活高度内容分区

我有如下html代码：

<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>

.container{
    display:table;
    height:800px;
    width:100%;
}
.container > div{
    display:table-row;
}
.header{background:red; height:100px;}

.content{background:blue}

.footer{background:green; height:100px;}

容器的高度是固定的（例如800px）。 div#页脚和div#页眉的大小在开始时是未知的（通过Javascript设置）

我希望div#content占据剩余高度的100%

---

可以使用CSS完成吗？

对于这种类型的功能，您可以使用display:table进行此操作。这样写：

<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>

.container{
    display:table;
    height:800px;
    width:100%;
}
.container > div{
    display:table-row;
}
.header{background:red; height:100px;}

.content{background:blue}

.footer{background:green; height:100px;}

检查这个

---

注意：在IE8及以上版本之前都是有效的。

对于这种类型的功能，您可以使用显示：表格。这样写：

<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>

.container{
    display:table;
    height:800px;
    width:100%;
}
.container > div{
    display:table-row;
}
.header{background:red; height:100px;}

.content{background:blue}

.footer{background:green; height:100px;}

检查这个

---

注意：在IE8及以上版本之前都是有效的。

因为您无法设置页脚高度（如您所写）
试试这个：

#container{
    background : red;
    height:800px;
    min-height:800px
}
#header{
    background : blue;
}
#content{
    background : yellow;
    height:100%
}
#footer{
    background : green;
    //position:absolute;
    position:fixed;
    bottom:0;
    width:100%;
}

---

和jsfiddle:

，因为您无法设置页脚高度（如您所写）
试试这个：

#container{
    background : red;
    height:800px;
    min-height:800px
}
#header{
    background : blue;
}
#content{
    background : yellow;
    height:100%
}
#footer{
    background : green;
    //position:absolute;
    position:fixed;
    bottom:0;
    width:100%;
}

---

jsfiddle:

如果您使用javascript设置其他div的高度，您可以使用jquery获得窗口的高度，减去其他2个div的高度，瞧，剩下的是正确的数值。。。 这会给你一个想法

---

如果您使用javascript设置其他div的高度，您可以使用jquery获得窗口的高度，减去其他2个div的高度，瞧，剩下的数值是正确的。。。 这会给你一个想法

---

使用这些CSS规则，是否有办法将页眉和页脚的高度设置为等于其内容，而不是某些特定的像素值（您在此处设置了100px）？如果我删除height:100px，它们的高度将大于其内容的高度。谢谢。使用这些CSS规则，有没有办法将页眉和页脚的高度设置为等于它们的内容，而不是某些特定的像素值（您在这里设置了100px）？如果我删除height:100px，它们的高度将大于其内容的高度。非常感谢。