Warum erbt mein untergeordnetes DIV nicht 100 % der Größe von seinem schwebenden übergeordneten Element?

Erzwingen einer Höhe von 100 % für untergeordnete DIV innerhalb schwebender übergeordneter Elemente

Im bereitgestellten HTML und CSS bleibt die Höhe des inneren DIV trotz Bemühungen bei 0 Pixel es als 100 % des Elternteils zu deklarieren Höhe.

Lösung:

Um dieses Problem zu beheben, erfordert das übergeordnete DIV „outer“ eine „display:flex“-Eigenschaft, um die Flexbox-Funktionalität zu aktivieren:

#outer {
  display: flex;
}

Flexbox bietet Unterstützung für flexible Layouts, die es dem inneren DIV, „inner“, ermöglichen, sich vertikal auszudehnen und die volle Höhe einzunehmen übergeordnetes Element.

Zusätzliche Überlegungen:

1. Browserkompatibilität: Flexbox wird von modernen Browsern weitgehend unterstützt, kann jedoch Kompatibilitätsprobleme mit älteren Versionen aufwerfen des Internet Explorers (z. B. IE9). Verwenden Sie Präfixe, um die Kompatibilität zwischen verschiedenen Browsern sicherzustellen.
2. Elemente ausrichten vs. selbst ausrichten: „align-items“ ist eine Eigenschaft für das übergeordnete Element, das die vertikale Ausrichtung seiner untergeordneten Elemente bestimmt. Der Standardwert ist „stretch“, wobei alle untergeordneten Elemente vertikal gestreckt werden, um die verfügbare Höhe auszufüllen. Wenn eine andere Ausrichtung für das untergeordnete DIV gewünscht wird, verwenden Sie die Eigenschaft „align-self“.
3. JS Fiddle-Beispiel: Besuchen Sie https://jsfiddle.net/bv71tms5/2/ Sehen Sie sich ein funktionierendes Beispiel der vorgeschlagenen Lösung an.

Das obige ist der detaillierte Inhalt vonWarum erbt mein untergeordnetes DIV nicht 100 % der Größe von seinem schwebenden übergeordneten Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!