css - 表格 rowspan 中的 Div 不使用全高

Question

我有一个非常规则的 HTML <table>一个单元格通过 rowspan 跨越多行.在这个单元格中，我有一个 <div>我想占据牢房的整个高度，但对于我来说，我似乎无法弄清楚。似乎类似于 this post其中提到 this Chrome bug但也看起来很简单，也许我只是没有想清楚。

这是我的 HTML 的精简版:

<table>
    <tr>
        <td class="a" rowspan="2"><div>A</div></td>
        <td class="b"><div>B</div></td>
    </tr>
    <tr>
        <td class="c"><div>C</div></td>
    </tr>
</table>

和 CSS:

td
{
    vertical-align: top;
}
td.a div
{
    background-color: #f00;
    height: 100%;
}

还有一个 JSFiddle .这是我得到的和我想要得到的:

真正奇怪的是，如果我使用 Chrome 的检查器来更改 <div>至 display: inline-block然后将其设置回 display: block它实际上看起来和我想要的完全一样。

(不，从表切换不是这个元素的选项，还有其他未显示的代码需要这样做。)

Answer 1

选项1

只需将 overflow:auto; 添加到您的 div CSS

Demo Fiddle

td
{
    vertical-align: top;
}
td.a div
{
    background-color: #f00;
    height: 100%;overflow:auto;
}

选项 2

或者，您需要定义 table 的高度，以便 child 能够计算出它的 100% 是 100% 的高度。

选项3

唯一的其他方法是在 td 元素上设置 position:relative 然后为子 div 设置 position:absolute