Warum haben meine DIVs in Firefox und IE nicht 100 % Höhe?

Div 100 % Height-Kompatibilitätsprobleme zwischen Firefox und IE

In diesem Szenario sind Sie auf eine Ungleichheit bei der Darstellung von DIV-Elementen zwischen Firefox und IE gestoßen. Insbesondere wenn die Höhe innerhalb eines enthaltenden DIV auf 100 % festgelegt wird, werden die verschachtelten DIVs im IE nicht auf die volle Höhe erweitert.

Die Diskrepanzen ergeben sich aus dem Verhalten im Quirks-Modus und im Standardmodus:

• Im Quirks-Modus (den Firefox möglicherweise standardmäßig verwendet) wird die Höhe relativ zum Ansichtsfenster berechnet.
• Im Standardmodus (die empfohlene Einstellung), die Höhe hängt von der Höhe des umschließenden Blocks ab.

In Ihrem Code ist die Höhe des umschließenden Blocks (#container) auf „auto“ eingestellt, was im Standardmodus ergibt eine undefinierte Höhe. Dadurch wird auch die Höhe der verschachtelten DIVs undefiniert.

Um dieses Problem zu beheben und die Konsistenz über alle Browser hinweg sicherzustellen, sollten Sie die Höhe des enthaltenden Blocks und seiner Vorgänger bis zum Stamm (HTML und Text) explizit definieren Elemente):

html, body { height: 100%; }
#container { height: 100%; }

Indem Sie die Höhe dieser Elemente festlegen, erstellen Sie einen genau definierten enthaltenden Block, der es den verschachtelten DIVs ermöglicht, diese Höhe zu erben und auf 100 % zu strecken. in ihrem Container in allen Browsern.

Das obige ist der detaillierte Inhalt vonWarum haben meine DIVs in Firefox und IE nicht 100 % Höhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!