垂直流动布局

这是我需要实现http://imm.io/16BQK 垂直流动布局

里面的包装元素的布局我有3行。顶部和底部行的高度与普通块元素一样高 - 与内容一起展开。

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

如果我知道顶部和底部块的高度，我可以使用display: table-row。但是，如果只有这种可能，我希望能够实现这种自动化。

我很好JS的位，但我不知道怎么做，在优雅的方式，考虑到我想有这种动态的（中间组件调整大小时，页眉/页脚改变他们的高度）。

来源

2013-05-19 Guard

'位置：absolute'底部块？ – Salman

如果中间块的内容不适合它呢？溢出？ –

@AxelAmthor是的。更准确地说，它将包含另一个将具有100％高度和溢出的.scroll包装器：滚动。想想带有页眉和页脚的电子邮件列表，完整的控件 – Guard

我不明白为什么你不能做到这一点与display: table-row，所有你需要做的就是设置display: table上都需要进行内部div的包装div和display: table-row。然后将中间的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; 
}

来源

2013-05-19 22:22:43

这显然不起作用。高度不固定，整个表扩展到需要的有效高度：http://jsfiddle.net/HHdJa/ –

@AxelAmthor - 我有点错过了OP想要在中间行内滚动的点，因为我没有读全部对问题的评论，但这是一个简单的解决方法：http://jsfiddle.net/HHdJa/1/。 –

@AxelAmthor - 我确定OP可以做到这一点，事实上OP在评论中提到它会做，因为你在整个桌子上的角度扩展到所需的有效高度，你不应该做出最高的底部的div比桌子的整个高度占用更多的空间，因为这样做是没有意义的。我认为可以肯定的是，顶部和底部div的组合内容的高度不会超过桌子的高度。在这种情况下，该解决方案工作得很好。 –

-1

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

高度/更正取决于边界等，并只是一个例子，可能需要一些改进。

来源

2013-05-19 21:31:15

>我很满意JS的一些部分，但我不确定如何以优雅的方式做到这一点，考虑到我希望有这种动态（当页眉/页脚改变它们的高度时，中间块调整大小）。 – Guard

每当顶部或底部内容发生变化时，您可以调用setsizes（）。 –

感谢downvoter没有一个更好的主意。问题是实际的高度是未知的，甚至剩下的高度可能会变成负值。这可以恕我直言，不能由CSS独力摆弄。 –

垂直流动布局

回答

相关问题