Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Mary-Kate Olsen
Freigeben: 2024-11-03 09:49:29
Original
617 Leute haben es durchsucht

Why Do Divs Not Stretch to Container Height in IE?

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage