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

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/