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