动态表格行高忽略单元格中的内容高度

第一行的高度可能有所不同，以适应长度不同的内容。第三行从不改变，始终具有相同的高度，这符合其内容。第二行有一堆内容将超过单元格高度，并应在超过单元格高度后隐藏。此行的高度应完全基于第一行占用多少。

所以要对高度明确：

行1 = X（动态）
行3 = Y（静态）
行2 = 500 - X - ý

我发现了一种在Firefox中执行此操作的方法，但它在IE 8中不起作用。现在我正在使用JavaScript在事实之后修复它，但如果可以纯粹使用CSS/HTML 。

这里是我现在如何工作的基本翻译。

<table cellpadding="0" cellspacing="0" id="table"> 
    <tr><td id="row1">Row 1 Content</td></tr> 
    <tr><td id="row2"><div>Row 2 Content. Lots more content here should not cause the table to expand.</div></td></tr> 
    <tr><td id="row3">Row 3 Content</td></tr> 
</table> 

#table{height:500px;width:200px;} 
#row1,#row3{height:1%} 
/* ^^ force cell heights to fix content */ 
#row2{position:relative;height:99%} 
/* ^^ a height must be specified to get the absolutely positioned div to assume the cell's height */ 
#row2 div{position:absolute;height:100%;width:200px;overflow:hidden;top:0;left:0;} 
/* ^^ allows content to overflow the cell without causing the cell to expand */

不幸的是，这在IE中不起作用。 IE将占用第2行的99％高度，并使单元格与表格的设置宽度（500px）一样高，即使这会导致表格远大于500％。我会离开高度风格，但其中的div不知道高度是多少。

目前我使用jQuery来设置中间行的高度，基于其他单元格的高度，但这不是最优的。

想法？

感谢

来源

2011-09-12 smdrager

我解决了这个不使用3行，而是2行。第一行是动态的，第二行占用剩余空间，但是随后将附加内容拆分为附着在单元格底部的div。额外的内容只会在div下流动。

来源

2012-04-04 16:40:25 smdrager

为什么不使用三个的div向左或向右完全浮动的每个（也许你想设置页边距），其中第一uoy休假“高度” CSS独自一人，在第三组固定的高度。但我不明白'行2 = 500 - x - y'这意味着如果1超过500的高度，它将是负高度。这应该满足Chrome，FF，Opera和IE8。

来源

2011-09-12 18:35:56

总高度不会超过500. Div's没有表格所具有的高度。在你的例子中，第2行的高度不会变化，以使3一起等于500。 – smdrager

动态表格行高忽略单元格中的内容高度

回答

相关问题