Wie kann ich dafür sorgen, dass ein untergeordnetes Div den verbleibenden Platz seines übergeordneten Containers ausfüllt?

Erweitern der Div-Höhe, um den verbleibenden übergeordneten Platz einzunehmen

Es ist eine häufige Aufgabe, dafür zu sorgen, dass ein untergeordnetes Div den verbleibenden Platz seines übergeordneten Containers einnimmt ohne die Höhe explizit festzulegen. Hier sind mehrere Methoden, um dies zu erreichen:

1. Rasterlayout

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

Diese Methode erstellt ein Rasterlayout mit einer Zeile von 100 Pixel Höhe. Das untergeordnete Div füllt den verbleibenden Platz aus.

2. Flexbox

.container {
  display: flex;
  flex-direction: column;
}

.container .down {
  flex-grow: 1;
}

Flexbox ermöglicht das Festlegen von Flex-Grow auf 1 für das untergeordnete Div, wodurch es erweitert wird, um den verbleibenden vertikalen Raum auszufüllen.

3. Größenberechnung

.up {
  height: 100px;
}

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

Diese Methode nutzt die CSS-Höhenberechnung, um die Größe des ersten Kindes von 100 % zu subtrahieren, sodass das zweite Kind die verbleibende Größe erhält.

4 . Überlauf ausgeblendet

.container {
  overflow: hidden;
}

.down {
  height: 100%;
}

Das Überschreiben des Standardanzeigeverhaltens durch Ausblenden des Überlaufs ermöglicht es dem untergeordneten Div, die Höhe des übergeordneten Elements auszufüllen.

5. Max-Content

.container {
  height: 100%;
}

.down {
  height: max-content;
}

Der Eigenschaftswert „Max-Content“ passt die Größe des untergeordneten Div entsprechend seinem Inhalt an und belegt so effektiv den verbleibenden Platz.

Beachten Sie, dass einige Methoden Einschränkungen oder Browserbeschränkungen haben können Supporteinschränkungen. Wählen Sie die geeignete Methode basierend auf Ihren spezifischen Anforderungen.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein untergeordnetes Div den verbleibenden Platz seines übergeordneten Containers ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!