如何使 DIV 元素拉伸到其表格单元格的高度？-css教程-PHP中文网

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

Mary-Kate Olsen

发布： 2024-12-05 02:29:13

原创

892 人浏览过

How to Make a DIV Element Stretch to the Height of its Table Cell?

如何拉伸 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中文网其他相关文章！