Wie kann ich ein schwebendes Div auf 100 % der Höhe seines übergeordneten Elements bringen?

100 % Höhe für schwebendes Div innerhalb des übergeordneten Elements erreichen

Wenn Sie versuchen, ein schwebendes Div auf 100 % Höhe seines übergeordneten Elements festzulegen, kann dies passieren stoßen Sie auf eine Herausforderung, bei der das innere Div mit einer Höhe von 0 Pixel gerendert wird. Dieses Verhalten wird auf die standardmäßige vertikale Ausrichtung für HTML-Elemente zurückgeführt. Um dieses Problem zu beheben, müssen Sie die Anzeigeeigenschaft des übergeordneten Divs so konfigurieren, dass die vertikale Ausrichtung aktiviert wird.

Lösung:

Um zu erzwingen, dass das innere Div der Höhe des übergeordneten Divs entspricht , ändern Sie das CSS wie folgt:

#outer {
  display: flex;
  /* Add necessary prefixes for cross-browser compatibility. */
}

Zusätzlich Überlegungen:

• Präfixe: Es ist wichtig, geeignete CSS-Herstellerpräfixe für die browserübergreifende Kompatibilität hinzuzufügen.
• Internet Explorer: Aufgrund der eingeschränkten Unterstützung für Flexbox wird das Layout in Internet Explorer 9 und früheren Versionen möglicherweise nicht angezeigt korrekt.
• Ausrichtung: Standardmäßig ist die align-items-Eigenschaft für das übergeordnete Element auf „stretch“ eingestellt, was bedeutet, dass die untergeordneten Elemente, einschließlich des inneren Div, vertikal ausgerichtet und gestreckt werden um den verfügbaren Platz zu füllen. Wenn Sie eine andere Ausrichtung für das untergeordnete Div benötigen, können Sie die Eigenschaft align-self verwenden.

Live-Beispiel:

Klicken Sie auf den folgenden Link für ein Live JSFiddle-Demonstration: https://jsfiddle.net/bv71tms5/2/

Das obige ist der detaillierte Inhalt vonWie kann ich ein schwebendes Div auf 100 % der Höhe seines übergeordneten Elements bringen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!