如何填充元素内的所有可用高度

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> 

有三行的表。中间的排适合桌子的所有可用高度。 我从here采取了此解决方案。

问题是不可能使中间细胞溢出。看起来中间的单元格的最小高度属性等于其内容的高度。 那么是否有可能以某种方式打开滚动（overflow-y：auto），如果它不能如何在div中实现这种布局？

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

Answer 1

Here它。

基本上，你的TD元素添加一个div，添加一个固定的高度（我选择20px）和overflow: auto。

Answer 2

将中间行的内容包装在div中，并将css应用于div。

<div class="widget"> 
<table cellpadding="0" cellspacing="0"> 
    <tr class="widget-header"> 
     <td>20 px above</td> 
    </tr> 
    <tr class="widget-content"> 
     <td><div id="myDiv">This gray cell fits all available height of table. What happens when more text is added to this? Woot, scrolls bars.</div></td> 
    </tr> 
    <tr class="widget-footer"> 
     <td>20 px below</td> 
    </tr> 
</table> 
</div> 

.widget{ 
    position:absolute; 
    min-width:200px; 
    width:200px; 
    outline:1px solid gray; 
    right:50%; 
    top:20px; 
} 
.widget > table{ 
    height:100%; 
    width:100%; 
} 
.widget-header{ 
    height:20px; 
} 
.widget-content{ 
    vertical-align:top; 
    background:gray; 
} 
.widget-footer{ 
    height:20px; 
} 
#myDiv 
{ 
    height:40px; 
    overflow-y:scroll; 
} 

http://jsfiddle.net/2YvG6/