html – 填充其父高,不指定高度

2024年1月30日 169次阅读

我知道有一个类似的问题
here,但它在我的情况下不起作用.

<table class="Layout">
    <tbody>
        <tr>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
        </tr>
    </tbody>
</table>

如何使我的div.Key元素与其父元素具有相同的高度< td>没有指定高度为< td>元素？

我的表将动态更改(添加和删除列和行),因此我无法强制使用< td>元素到绝对大小,我也不想在每次修改表时计算并给它们一个相对大小. .Layout表大小也会动态变化,并且始终是绝对值. (出于某些原因,我也不想使用row / colspan,以防有人建议.)

任何的想法？

最佳答案 我通过在每个div.Key中添加一个内部div并使用display：table;并显示：table-cell;这就是我需要的.这是代码：

.Layout {
    width: 1024px; /* TEST */
    height: 480px; /* TEST */
}
.Key {
    text-align: center;
    display: table;
    width: 100%;
    height: 100%;
}
.Key > div {
    display: table-cell;
    vertical-align: middle;
}

而且：

<table class="Layout">
    <tbody>
        <tr>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
        </tr>
    </tbody>
</table>
点赞