Heim >Web-Frontend >CSS-Tutorial >Warum haben meine DIVs in Firefox und IE nicht 100 % Höhe?

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

Susan Sarandon
Susan SarandonOriginal
2024-11-02 21:21:02926Durchsuche

Why Are My DIVs Not 100% Height in Firefox and IE?

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!

Stellungnahme:
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