Warum erreichen interne Divs im IE nicht die volle Höhe, wenn in einem Container-Div 100 % Höhe verwendet wird?

CSS-Höhenfehler bei der Div-Positionierung in Firefox und IE

In diesem Szenario besteht das Ziel darin, ein Container-Div zu erstellen, das zwei interne kapselt divs, die beide 100 % Breite und Höhe umfassen. Während dies in Firefox wie beabsichtigt funktioniert, zeigt IE ein eigenartiges Verhalten, bei dem die internen Divs nicht die volle Höhe des Containers erreichen und sie auf der Höhe des enthaltenen Textes belassen.

Diese Diskrepanz ergibt sich aus dem Konzept von ein „enthaltender Block“ in der CSS-Berechnung. Prozentsätze werden nicht relativ zum Ansichtsfenster berechnet, sondern eher zur Höhe des „enthaltenden Blocks“ – in diesem Fall des #container div.

Im bereitgestellten CSS fehlt für #container eine explizite Höhenangabe, wie folgt Standardmäßig „auto“. Das bedeutet, dass seine Höhe anhand des Inhalts im Inneren bestimmt wird. Anschließend wird die 100 %-Höheneigenschaft für die internen Divs relativ zu dieser automatischen Höhe, die je nach Textinhalt variiert.

Um dieses Problem zu beheben, sind die folgenden Anpassungen erforderlich:

1. Deklarieren Sie einen expliziten Höhenwert für #container, um den Inhalt festzulegen Block:

   <code class="css">#container {
     height: 100%;
   }</code>

2. Legen Sie Höhen für HTML und Text fest, da der anfängliche enthaltende Block browserabhängig ist:

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

Durch diese Änderungen können die internen Divs die gesamte Höhe von #container und 100 % des Ansichtsfensters abdecken, wodurch die in beobachteten Höhenprobleme behoben werden IE.

Das obige ist der detaillierte Inhalt vonWarum erreichen interne Divs im IE nicht die volle Höhe, wenn in einem Container-Div 100 % Höhe verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!