Html 桌子上的全高沙发

这应该很简单。我试图在表的

中获得一个灰色条，以扩展到

其余部分的全部高度。问题是行和单元格的高度不是固定的

我相信无表布局，所以不需要改变我。在这种情况下，我被一张桌子卡住了，所以我需要好好地处理它

以下是HTML：

<table>
    <tr><td>
            <div class="bar"></div>
        </td>
        <td>
            please<br/>
            help<br/>
            me<br/>
            stack<br/>
            overflow<br/>
        </td>
    </tr>
</table>

---

这里有一个小问题：

尝试添加以下css样式：

html, body 
{
     height: 100%;
}

及

---

尝试添加以下css样式：

html, body 
{
     height: 100%;
}

及

这就是你想要的吗

我将类

条
添加到
中，而不是
这是您想要的吗

我将类
条
添加到
而不是
中，我不确定您是否可以仅使用CSS来实现这一点，但我对CSS不太熟悉，因此我只使用JQuery，当我有动态大小时，它总是最适合我

<script type="text/javascript">
$(document).ready(function () {
    $(".bar").height($(".bar").parent().height());
});
</script>


$（文档）.ready（函数（）{
$（“.bar”）.height（$（.bar”）.parent（）.height（））；
});

我对此进行了测试，效果很好，但如果您正在寻找一个CSS专用的解决方案，我就不知道了。希望有帮助
 我不确定您是否可以仅使用CSS来实现这一点，但我对CSS不太熟悉，所以我只使用JQuery，当我使用动态大小时，它总是最适合我

<script type="text/javascript">
$(document).ready(function () {
    $(".bar").height($(".bar").parent().height());
});
</script>


$（文档）.ready（函数（）{
$（“.bar”）.height（$（.bar”）.parent（）.height（））；
});

我对此进行了测试，效果很好，但如果您正在寻找一个CSS专用的解决方案，我就不知道了。希望有帮助
 仅使用CSS更改的工作版本：

基本上，TD应该定义一个高度，因此百分比高度对于其子节点是有意义的

其次，您的div需要有一个显示属性
'table'

完整CSS：

td {
    width: 100px;
    border: 1px solid black;
    height: 100%;
}

.bar {
    background: #eee;
    width: 10px;
    height: 100%;
    min-height: 100%;
    display: table;
}

您可以从上面删除宽度部分。
工作版本只需更改CSS即可：

基本上，TD应该定义一个高度，因此百分比高度对于其子节点是有意义的

其次，您的div需要有一个显示属性
'table'

完整CSS：

td {
    width: 100px;
    border: 1px solid black;
    height: 100%;
}

.bar {
    background: #eee;
    width: 10px;
    height: 100%;
    min-height: 100%;
    display: table;
}

您可以从上方移除宽度部分。
谢谢！这并不是我所需要的，但它确实适用于我发布的简化示例。谢谢！这并不是我所需要的，但它确实适用于我发布的简化示例。td/表格css应该足够了。非常好，谢谢。不过，html和正文上的样式看起来并不是必需的。[编辑：…正如@Jose刚刚指出的那样]如果外部容器没有100%的高度，它就不起作用。@scim:Kate是对的。它可以在Firefox和Chrome中工作，但在IE中，外部容器必须有100%的高度才能工作。凯特：我认为@scim不希望html/正文有100%的高度。td/表格css应该足够了。非常好，谢谢。不过，html和正文上的样式看起来并不是必需的。[编辑：…正如@Jose刚刚指出的那样]如果外部容器没有100%的高度，它就不起作用。@scim:Kate是对的。它在Firefox和Chrome中工作，但在IE中，外部容器必须具有100%的高度才能工作。
display:table
正是我所缺少的。谢谢
display:table
正是我所缺少的。谢谢