html - 如何适应元素内的所有可用高度

Question

这是一个 example on JSFiddle .代码摘录:

<table style="height:100%">
    <tr height="20"><td></td></tr>
    <tr>
        <td>This gray cell fits all available height of table</td>
    </tr>
    <tr height="20"><td></td></tr>
</table>

有一个三行的表格。中间的行适合 table 的所有可用高度。我从 here 中获取了这个解决方案.

问题是无法为中间单元格设置 overflow-y。中间单元格似乎有一个 min-height 属性等于它的内容的高度。那么是否有可能以某种方式打开滚动 (overflow-y:auto)，如果不能，如何在 div 中实现此布局？

更新。谢谢。似乎这是工作示例:http://jsfiddle.net/haGWe/6/但如何使用 div 实现这一点仍然很有趣。

Answer 1

Here是的。

基本上，在你的 td 元素中添加一个 div，添加一个固定的高度(我选择了 20px)和 overflow: auto。