Question

我正在尝试使用CSS创建表格单元格的高度和宽度的表格单元格的子元素。这是html：

<tr>
    <td>
        <div class="yellowDiv"></div>
    </td>
    <td></td>
    <td></td>
    <td></td>
</tr>

这是我正在使用的CSS：



    table tbody tr td:nth-child(1){
        position: relative;
    }

    table tbody tr td div.yellowDiv{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: yellow;
    }

以上代码在Chrome中正常呈现，但在IE中却没有（仅与IE 9和10有关）。我也尝试为display: table-cell;元素设置div，但无济于事。我也尝试将div元素的高度设置为100％，但这也没有用。

Answer 1

绝对定位的元素不再是布局的一部分。他们有自己的布局上下文。因此，他们无法知道他们的父元素有多大。

您需要使用JavaScript来解决这个问题，或者考虑为什么需要绝对定位。

您可以使用：

.yellowDiv {
    background-color:#ffff00;
    height:100%;
}

不能使子元素与父元素IE的高度相同

1 个答案: