Warum dehnen sich Divs im IE nicht auf Containerhöhe aus?

Höhenberechnungen in Divs: Firefox vs. IE-Kompatibilität

Bei einer Webseite mit zwei in einem Container verschachtelten Divs ist die Erwartung für Beide inneren Divs nehmen die Breite und Höhe des Containers vollständig ein. Es wurde jedoch beobachtet, dass sich die inneren Divs im Internet Explorer (IE) nur auf die Höhe des darin enthaltenen Textes ausdehnen, im Gegensatz zu Firefox, wo sie sich auf die volle Containerhöhe ausdehnen.

Die bereitgestellten Stylesheet-Sets beide inneren Divs, #mainContentsWrapper und #sidebarWrapper, auf 100 % Höhe. Dies funktioniert wie vorgesehen in Firefox, jedoch nicht im IE. Der Grund für diese Diskrepanz liegt in der Definition der prozentualen Höhe in der CSS-Spezifikation.

Prozentangaben in Höhenmessungen basieren auf der Höhe des „enthaltenden Blocks“, nicht auf dem Ansichtsfenster. Im gegebenen Szenario dient #container als enthaltender Block für die inneren Divs. Da die Höhe von #container auf „auto“ eingestellt ist, hängt sie von der Inhaltshöhe ab. Folglich wird die prozentuale Höhe der inneren Divs effektiv als „auto“ berechnet, was zu unerwartetem Verhalten im IE führt.

Um dieses Problem zu beheben, muss die Höhe von #container explizit definiert werden. Um außerdem sicherzustellen, dass sich die Divs auf die volle Höhe des Ansichtsfensters ausdehnen, muss die Höhe des und Elemente müssen ebenfalls angegeben werden.

Durch diese Anpassungen sollte sich der Code sowohl in Firefox als auch im IE wie erwartet verhalten:

<code class="CSS">html, body { height:100%; }
#container { height:100%; }</code>

Das obige ist der detaillierte Inhalt vonWarum dehnen sich Divs im IE nicht auf Containerhöhe aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!