css - 垂直流体布局

Question

这是我需要实现的布局http://imm.io/16BQK

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

中间块应该占据其余的空间。

如果我知道我可以使用的顶部和底部块的高度display: table-row。但如果可能的话，我想拥有这个自动的。

我对一些 JS 很好，但我不确定如何以优雅的方式做到这一点，考虑到我想要这种动态（当页眉/页脚改变它们的高度时中间块调整大小）。

Answer 1

我不明白为什么你不能这样做，display: table-row你所要做的就是display: table在包装器div和display: table-row所有内部设置上div。然后将div中间设置为100%高。这将确保 top 和 bottomdiv的高度仅与它们的内容一样高，中间div将填满剩余的空间。它的行为与 HTML 完全一样table。

这是一个jsFiddle

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

Answer 2

需要一些 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>

和

function setSizes()
{
    var topHeight = $("#topdiv").height();
    var bottomHeight = $("#bottomdiv").height();
    var mainHeight = $("#wrapper").height() - topHeight - bottomHeight;
    //alert(mainHeight);
    $("#content").height(mainHeight - 5);
}

setSizes();

http://jsfiddle.net/tMNh2/2/

高度/校正取决于边界等，仅作为示例，可能需要一些增强。