如何使 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中文網其他相關文章！