Question

这应该很简单。我试图在表格的<td>中得到一个灰色条，以扩展到<tr>其余部分的完整高度。问题是行和单元格的高度不固定。

我是无桌面布局的信徒，所以不需要转换我。在这种情况下，我被困在桌子上，所以我需要使用它并很好地对待它。

这是HTML：

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

CSS：

td {
    border: 1px solid black;
}

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

这是一个小提琴：http://jsfiddle.net/DKQVG/4/

Answer 1

尝试添加以下css样式：

html, body 
{
     height: 100%;
}

和

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

Answer 2

这是你想要的吗？：http://jsfiddle.net/ymu4y/2/

我将课程bar添加到<td>而不是<div>。

Answer 3

仅使用CSS更改的工作版本：http://jsfiddle.net/wLtCd/1/

基本上，您的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;
}

您可以从上方移除宽度部分。

Answer 4

我不确定你是否能用CSS完成它，但我不熟悉CSS所以我只会使用JQuery，当我有动态的sizings时，总是最适合我。

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

我对此进行了测试并且工作正常，但如果您正在寻找仅限CSS的解决方案，我就不知道了。希望有所帮助！

表中的全高div

4 个答案: