Wie kann ich dafür sorgen, dass ein untergeordnetes Div die verbleibende Höhe seines übergeordneten Elements einnimmt?

So stellen Sie sicher, dass ein Div die verbleibende Größe des Elternteils einnimmt

Beachten Sie den folgenden HTML- und CSS-Code:

<div>

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

Hier haben wir ein Container-Div mit zwei untergeordneten Elementen. Das erste Kind (#up) hat eine bestimmte Größe, das zweite (#down) dagegen nicht. Wie können wir dafür sorgen, dass #down die verbleibende Höhe des Container-Div einnimmt?

Lösung

Mehrere Methoden können dies erreichen, abhängig von der Browserkompatibilität und davon, ob #up über eine verfügt feste Höhe.

Optionen:

1. Rasterlayout:

.container {
  display: grid;
  grid-template-rows: 100px;
}

2. Flexbox-Layout:

.container {
  display: flex;
  flex-direction: column;
}
.container .down {
  flex-grow: 1;
}

3. Berechnete Höhe:

.container .up {
  height: 100px;
}
.container .down {
  height: calc(100% - 100px);
}

4. Überlauf ausgeblendet:

.container {
  overflow: hidden;
}
.container .down {
  height: 100%;
}

Die Wahl der Methode hängt von den spezifischen Anforderungen und der Browserunterstützung ab. Beachten Sie, dass CSS jetzt den Eigenschaftswert „max-content“ für die Größenanpassung enthält, der in bestimmten Szenarien geeignet sein kann.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein untergeordnetes Div die verbleibende Höhe seines übergeordneten Elements einnimmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!