Wie kann ein untergeordnetes Div ohne absolute Positionierung die verbleibende Höhe seines übergeordneten Elements einnehmen?

Div die verbleibende übergeordnete Höhe ohne absolute Positionierung belegen lassen

Einführung

In der Frontend-Entwicklung kann die Zuweisung von Platz für Elemente innerhalb eines Container-Divs häufig vorkommen Herausforderung. Ein Szenario besteht darin, dass ein untergeordnetes Div die verbleibende Höhe seines übergeordneten Elements einnimmt, insbesondere wenn die Größe des übergeordneten Elements bekannt ist, die des untergeordneten Elements jedoch nicht. In diesem Artikel wird untersucht, wie Sie dies erreichen können, ohne auf absolute Positionierung zurückzugreifen.

Verwendung von CSS-Techniken

• Rasterlayout: Durch Zuweisen einer Grid-Template-Rows-Eigenschaft zu Wenn Sie den Container mit einem einzelnen Wert (z. B. 100 Pixel) füllen, füllen die untergeordneten Divs automatisch den verbleibenden Platz vertikal.
• Flexbox: Setzen Sie mithilfe der Spaltenstile „display: flex“ und „flex-direction:“ im Container die Eigenschaft „flex-grow“ für das untergeordnete Div auf 1. Dies weist das Kind effektiv dazu an erweitern und den verbleibenden Platz belegen.
• Rechnerbasierter Ansatz: Wenn die Größe des ersten Kindes bekannt ist, wird die Größe des Das zweite untergeordnete Element kann mithilfe von calc(100% - first_child_height) in CSS berechnet werden.
• Überlaufeigenschaft: Wenn die Überlaufeigenschaft des Containers auf „verborgen“ gesetzt ist, werden die untergeordneten Divs effektiv auf die zugeschnitten Abmessungen des Containers. Wenn Sie die Höhe des untergeordneten Div auf 100 % festlegen, wird es erweitert, um den verfügbaren Platz auszufüllen.

Beispielcode

Detaillierte Beispiele zur Veranschaulichung finden Sie in den bereitgestellten CSS- und HTML-Snippets diese Techniken. Beachten Sie, dass die Eigenschaft „max-content“ auch als Option zur Größenanpassung in Betracht gezogen werden kann, sodass in bestimmten Fällen keine festen Höhen erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie kann ein untergeordnetes Div ohne absolute Positionierung die verbleibende Höhe seines übergeordneten Elements einnehmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!