如何填充元素内的所有可用高度
问题描述:
这里是一个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来实现这一点仍然很有趣。
答
将中间行的内容包装在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;
}
+0
哦,你打我回答:-) –
UPD2。在这里它是在div [http://jsfiddle.net/6Q7L7/1/](http://jsfiddle.net/6Q7L7/1/)。 –
Np :)请将您的解决方案标记为“已接受的答案”,Thx并欢迎您来参与! –