Question

我有一个有3行的表，固定高度为500px。

第一行的高度可能不同，以适应其内容，其长度各不相同。第三行永远不会改变，并且始终具有相同的高度，这符合其内容。第二行有一串超出单元格高度的内容，应该在超出单元格高度后隐藏。这一行的高度应该完全基于第一行占用的数量。

所以要明确身高：

第1行= x（动态）
第3行= y（静态）
第2行= 500 - x - y

我已经在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根据其他单元格的高度设置中间行的高度，但这不是最佳的。

想法？

由于

Answer 1

为什么不使用三个div，每个浮动一个左或右（也许你想要设置边距），在第一个uoy中单独留下'height'css，在第三个固定高度。但我不明白'第2行= 500 - x - y'wchich意味着如果1超过500高度它将是负高度。这应该满足Chrome，FF，Opera和IE8。

Answer 2

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

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

2 个答案: