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获得了这个解决方案。

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

UPD。谢谢。似乎这是一个有效的例子：http://jsfiddle.net/haGWe/6/ 但是如何用div实现它仍然很有趣。

Answer 1

将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/

Answer 2

Here它是。

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

如何在元素内部适合所有可用高度

2 个答案: