Css 垂直流体布局

这是我需要实现的布局

在包装器元素内部，我有3行。顶行和底行的高度与普通块元素相同—随内容拉伸

中间的街区应该占据剩余的空间

如果我知道顶部和底部块的高度，我可以使用

display:table row

。但如果可能的话，我希望这是自动的

---

我对一些JS很满意，但考虑到我希望有这种动态（页眉/页脚改变高度时，中间块会调整大小），我不确定如何优雅地完成它。

需要一些dhtml，因为内部框不会自动收缩/扩展：

<div id="wrapper" style="position:relative; top:0; width:300px;
border:1px  solid black; left:0; height:550px;">
    <div id="topdiv" style=" 
    border:1px  solid red;">lorem ipsum...</div>
    <div id="main" style="border:1px  solid green;">
        <div id="content" style="overflow:scroll;">lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ... lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor</div>
    </div>
    <div id="bottomdiv" style="position:absolute; 
    border:1px  solid blue; left:0px; bottom:0px;display:block;width:100%;">lorem ipsum dolor site...<br>lorem ipsum dolor site...
        </div>
</div>

---

高度/校正取决于边框等，只是一个例子，可能需要一些增强。

我不明白为什么不能使用

显示：表行

，只需在包装

div

上设置

显示：表

，在所有内部

div上设置
显示：表行
。然后在中间设置<代码> div <代码> >代码> 100% <代码>高。这将确保顶部和底部的
div
仅与其内容一样高，中间的
div
将填满剩余的空间。它的行为与HTML
表
完全相同

这里有一个

position:absolute
在底部块上？如果中间块的内容不适合它怎么办？溢出？@AxelAmthor是的。更准确地说，它将包含另一个具有100%高度和溢出的.scroll包装器：scroll。想象一下邮件列表的页眉和页脚都是controls@Salman然后呢？它将如何缩小中间块？>我对一些JS很好，但我不确定如何以优雅的方式进行，因为我希望有这种动态（当页眉/页脚改变高度时，中间块会调整大小）。每当顶部或底部内容发生变化时，您可以调用setsizes（）。感谢下行投票者没有更好的想法。问题是实际高度未知，甚至剩余高度也可能为负值。这不能单靠css来完成。我想要一些自动的解决方案，而不是每次手动调用setSize。否则，你的建议显然是无效的。高度不是固定的，整个表扩展到所需的有效高度：@AxelAmthor-我有点错过了OP想要在中间一行滚动的要点，因为我没有阅读关于这个问题的所有评论，但这是一个简单的解决方法：。@AxelAmthor-我相信OP可以做到这一点，事实上OP在评论中提到它会做到，至于您在整个桌子上的点扩展到所需的有效高度，您不应该使顶部和底部div占据比桌子整个高度更多的空间，因为这样做没有意义。我认为可以安全地假设top和bottom div的内容的高度不会超过表的高度。在这种情况下，解决方案很好。@AxelAmthor-如果顶部和底部div的合并高度确实超过了表的总高度，我相信OP除了扩展表的高度之外，不会想要其他任何东西。因为如果不这样做，中间一行将根本不可见。好吧，所以您不知道确切的高度，但您不需要使用此解决方案，您需要知道的是页眉和页脚的组合高度不高于包含的表。请看我的上一篇，顶部和底部的
div
仅与它们的内容一样高，中间的
div
正在填充剩余的空间。总高度不会高于包装上设置的高度
div
，除非顶部和底部
div
的组合高度高于容器，否则我认为您无法获得更好的解决方案。
function setSizes()
{
    var topHeight = $("#topdiv").height();
    var bottomHeight = $("#bottomdiv").height();
    var mainHeight = $("#wrapper").height() - topHeight - bottomHeight;
    //alert(mainHeight);
    $("#content").height(mainHeight - 5);
}

setSizes();

.wrapper {
    display: table;
    height: 200px;
    width: 100%;
}
.header, .footer, .content {
    display: table-row;
    width: 100%;
    background-color: #EFEFEF;
}
.content {
    height: 100%;
    background-color: #FFF;
}