Wie lässt sich ein DIV-Element auf die Höhe seiner Tabellenzelle strecken?

So dehnen Sie ein DIV, um die Höhe einer Tabellenzelle auszufüllen

In bestimmten HTML-Layouts benötigen Sie möglicherweise ein DIV-Element zum Dehnen vertikal, um der Höhe der übergeordneten Tabellenzelle (TD) zu entsprechen. Auf diese Weise können Sie Inhalte innerhalb des DIV präzise positionieren, indem Sie sie beispielsweise an der unteren rechten Ecke der Zelle ausrichten.

Um dies zu erreichen, besteht ein Ansatz darin, eine Höhe von 1 Pixel für das TD festzulegen. Dadurch erhält der DIV eine definierte übergeordnete Höhe, aus der er seine prozentuale Höhe berechnen kann. Da der Inhalt des DIV größer als 1 Pixel ist, wird das TD und folglich das DIV automatisch vertikal erweitert.

Hier ist ein Beispiel:

<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 diesem Beispiel hat das TD zu Demonstrationszwecken eine Höhe von 1 Pixel und eine Hintergrundfarbe. Das DIV innerhalb des TD hat eine Höhe von 100 %, wodurch es sich vertikal ausdehnt, um das TD auszufüllen. Das Hintergrundbild wird dann aufgrund der Eigenschaft „background-position“ in der unteren rechten Ecke des DIV positioniert.

Das obige ist der detaillierte Inhalt vonWie lässt sich ein DIV-Element auf die Höhe seiner Tabellenzelle strecken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!