将元素扩展到表格单元格的整个高度？答案

【问题标题】：Expanding elements to the full height of a table cell?将元素扩展到表格单元格的整个高度？
【发布时间】：2012-11-14 05:47:41
【问题描述】：

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

这很好，但不幸的是，当您将position:relative 应用于 TD 表格单元格时（就像我在我的示例中一样），某些浏览器（如 Firefox）不喜欢它，它会破坏桌子。这可能只是错误的行为。