如何使用 CSS 使 DIV 元素填充表格单元格的整个宽度和高度？

使用CSS在表格单元格中实现全宽和全高DIV

这个问题多年来一直没有得到解决。然而，使用 CSS3，我们可以重新审视这个挑战，并探索如何扩展 DIV 以填充表格单元格的整个宽度和高度。

问题的关键在于单元格尺寸的动态性质和100% 值的有限响应能力。为了克服这个问题，解决方案涉及一个巧妙的技巧。

首先，为表格行分配一个非零高度（例如，1px）。这个技巧会触发浏览器对行高的识别，以便进行后续控制。

接下来，将 DIV 高度设置为 100%，现在它是相对于已建立的行高而言的。这可确保 DIV 动态扩展以垂直填充单元格。

为了匹配 DIV 的宽度，可以使用 CSS 显式指定单元格的宽度或根据其内容自动调整大小。

应用这些规则确保 DIV 填充整个表格单元格的尺寸，无论其初始值或动态值如何。

这里是一个 CSS 示例片段：

table {
  width: 200px;
}

tr {
  height: 1px;
}

td {
  height: inherit;
}

div {
  height: 100%;
}

以上是如何使用 CSS 使 DIV 元素填充表格单元格的整个宽度和高度？的详细内容。更多信息请关注PHP中文网其他相关文章！