Warum werden Div-Höhen in Firefox und Internet Explorer unterschiedlich gerendert?

IE Div Height Rendering Anomaly

Bei der Webentwicklung kommt es häufig zu Problemen mit der browserübergreifenden Kompatibilität. Ein solches Problem ist die Diskrepanz bei der Darstellung der Div-Höhe zwischen Firefox und Internet Explorer.

Das Problem:

In diesem Fall hat das Container-Div zwei untergeordnete Divs, die das sollten nehmen idealerweise 100 % der Breite und Höhe innerhalb des Containers ein. In Firefox funktioniert dies wie erwartet. Im IE erstrecken sich die Divs jedoch nur bis zur Höhe ihres Inhalts und lassen darüber leeren Raum.

Ursache:

Der Hauptunterschied liegt in der Prozentzahl -basierte Höhe wird berechnet. In Firefox ist der Prozentsatz relativ zur Höhe des Ansichtsfensters. Im IE ist es jedoch relativ zur Höhe des enthaltenden Blocks, in diesem Fall dem Container-Div.

Lösung:

Um dieses Problem zu beheben, ist es Es ist notwendig, die Höhe des Container-Div explizit anzugeben. Da der enthaltende Block außerdem ein Vorgängerelement sein kann, empfiehlt es sich, die Höhe des und Elemente ebenfalls auf 100 %. Dadurch wird sichergestellt, dass die Höhe des Container-Div korrekt berechnet werden kann.

Im überarbeiteten CSS-Code unten wird die Höhe des ist auf 100 % eingestellt und die Höhen von und sind auch angegeben:

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

Das obige ist der detaillierte Inhalt vonWarum werden Div-Höhen in Firefox und Internet Explorer unterschiedlich gerendert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!