html - 将元素扩展到表格单元格的整个高度？

Question

我正在尝试创建一个行表，每个行在某些块元素中都有一些内容（为简单起见，我在此示例中使用 DIV），我想将其元素拉伸到 TD 单元格的完整高度。在此示例中，右侧的“测试”文本应使其包含的灰色 DIV 填满包含 TD 单元格的整个高度：

我不想明确设置任何东西的高度（除了可能是百分比） -height:100%子 DIV 上的设置不会改变它的高度。有没有办法做到这一点？显然知道表格单元格的渲染高度的浏览器在不使用 JavaScript 的情况下绝对无法调整子元素的大小以填充它，这似乎很荒谬！

注意：我知道还有其他类似的问题，但他们似乎没有考虑到 CSS3 的新 flexbox 功能——也许这可以解决这个问题？

score 1 · Accepted Answer

您可以将父元素设置为相对定位，将子元素设置为显示块，它应该填充高度。在尝试获取链接文本以填充整个按钮容器时，我经常使用该技术。希望它可以转化为您正在尝试做的事情，但是由于您没有要显示的代码，因此我将在使用它时为您提供一个真实生活场景的简短示例：

<div style="position:relative; width: 50px; height: 50px;">
    <a href="" style="display: block; width: 100%; height: 100%;">some link</a>
</div>

score 0 · Accepted Answer

Boris Zbarsky 本人告诉我，完全不可能做到这一点 - 使表格单元格的子元素填充单元格的整个高度 - 除非明确指定单元格的高度。如果他们愿意，浏览器制造商可能会完成这项工作，但他们不会被打扰。

2 回答 2