如何使 DIV 元素拉伸到其表格单元格的高度？

如何拉伸 DIV 以填充表格单元格的高度

在某些 HTML 布局中，您可能需要一个 DIV 元素来拉伸垂直匹配其父表格单元格 (TD) 的高度。这使您可以在 DIV 中精确定位内容，例如将其与单元格的右下角对齐。

要实现此目的，一种方法是将 TD 的高度设置为 1px。这为 DIV 提供了定义的父级高度，以计算其百分比高度。由于 DIV 的内容大于 1px，因此 TD 和 DIV 将自动垂直扩展。

这里是一个示例：

<table>

CSS:

.td-container {
  background-color: #f5f5f5;
}

.div-content {
  height: 100%;
  background-image: url(icon.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
}

在此示例中，TD 的高度为 1px，背景颜色用于演示目的。 TD 内的 DIV 的高度为 100%，这导致它垂直拉伸以填充 TD。然后，由于背景位置属性，背景图像位于 DIV 的右下角。

以上是如何使 DIV 元素拉伸到其表格单元格的高度？的详细内容。更多信息请关注PHP中文网其他相关文章！