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

Question

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

第一行的高度可以变化，以适应其长度变化的内容。 第三行永远不会改变，并且始终具有适合其内容的相同高度。 第二行一堆会超过单元格高度的内容，超过单元格高度后应该隐藏。此行的高度应完全基于第一行占多少。

所以要清楚高度:

• 第 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”，这意味着如果 1 超过 500 高度，它将是负高度。这应该满足 Chrome、FF、Opera 和 IE8。