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

How to Stretch a DIV to Fill the Height of a Table Cell

In certain HTML layouts, you may need a DIV element to stretch vertically to match the height of its parent table cell (TD). This allows you to position content within the DIV precisely, such as aligning it at the bottom-right corner of the cell.

To achieve this, one approach is to set a height of 1px to the TD. This provides the DIV with a defined parent height to calculate its percentage height from. Since the DIV's contents are larger than 1px, the TD and consequently the DIV will automatically expand vertically.

Here's an example:

<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;
}

In this example, the TD has a height of 1px and a background color for demonstration purposes. The DIV within the TD has a height of 100%, which causes it to stretch vertically to fill the TD. The background image is then positioned at the bottom-right corner of the DIV due to the background-position property.

The above is the detailed content of How to Make a DIV Element Stretch to the Height of its Table Cell?. For more information, please follow other related articles on the PHP Chinese website!