Question

的布局

在包装元素内部，我有3行。顶部和底部行的高度与正常的块元素一样 - 按内容拉伸。

中间区块应该占用剩下的空间。

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

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

Answer 1

我不明白为什么你不能用display: table-row做到这一点，所有你需要做的就是在包装display: table和div上设置display: table-row在所有内在的div上。然后将中间的div设置为100%高。这将确保顶部和底部div仅与其内容一样高，中间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/

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

垂直流体布局

2 个答案: