Division mit Höhe (height:100%) im Internet Explorer
Kai
- css
Hallo Leute!
Ich versuche gerade, mit einer Division auf der linken Seite dind Navigation einzurichten.
Die Höhe soll sich nach dem Elternelement (body) richten und den Bereich von ganz oben bis ganz unten ausfüllen.
Mein Ansatz war:
HTML:
<body>
...
<div id="nav">
...
</div>
...
</body>
In CSS-Datei:
#nav
{
width: 11em;
height: 100%;
}
Aber der Internet Explorer scheint die Angabe 100% zu ignorieren. Wie bekomme ich die Division auf die volle Höhe angezeigt?
Danke & Gruß
Kai
Hallo,
Aber der Internet Explorer
Hast du überhaupt andere getestet?
scheint die Angabe 100% zu ignorieren. Wie bekomme ich die Division auf die volle Höhe angezeigt?
100% des Elternelements. Ich bin mir sicher, dass in diesem Fall sogar der IE mal was richtig interpretiert. Wie hoch ist den dein Elternelement?
Viele Grüße
Patrick
Aber der Internet Explorer
Hast du überhaupt andere getestet?
Ich teste außerdem im Firefox, der die Navigation komplett ausgefüllt auf der linken Seite anzeigt.
100% des Elternelements. Ich bin mir sicher, dass in diesem Fall sogar der IE mal was richtig interpretiert. Wie hoch ist den dein Elternelement?
Elternelement müsste in diesem Fall <body> sein und da ist leider nix drin außer ein paar divs, da ich ein Frameset "emulieren" will.
Wahrscheinlich stößt sich der IE deshalb daran, aber der FF zeigt es ja korrekt an. Auch verschwinden beim IE manchmal komplette Absätze mit Text, die aber da sind, sobald man sie markiert.
Wenn ich für die Höhe der Division ein height:inherit angebe, stellt FF es genauso dar wie der IE. Wer hat nun recht?
Gruß
Kai
Hallo,
Ich teste außerdem im Firefox, der die Navigation komplett ausgefüllt auf der linken Seite anzeigt.
Ich hatte deshalb gefragt, weil sich dein Code im IE wie erwartet verhält und auch Firefox und co. es so darstellen wie der IE - ja auch der Firefox sollte es so darstellen, tut er zumindest in validem Code - deinen kenne ich leider nicht, ich tippe aber mal auf einen fehlenden Doctype.
Elternelement müsste in diesem Fall <body> sein und da ist leider nix drin außer ein paar divs
Bingo. Und da braucht auch gar nix drin zu sein. Ich frage mal so: Welche height:?; hat es? Keine? Dann unternimm was dagegen.
Im allgemeinen solltest du übrigens mit min-height anstatt height arbeiten, sonst hast du n Problem wenn der Inhalt Höher wird als das Fenster (und da du ja nicht weisst wie hoch das Fenster des Users ist...)
Wahrscheinlich stößt sich der IE deshalb daran, aber der FF zeigt es ja korrekt an.
Auch verschwinden beim IE manchmal komplette Absätze mit Text, die aber da sind, sobald man sie markiert.
Das Verhalten kenne ich und ist äußerst ärgerlich. Der IE hat enorme Probleme mit float. Dass kann man umgehen, in dem man dem IE eine line-height für das betreffende Element zuweist. (Nein, einen logischen Sinn ergibt das nicht, aber was ist bei M$ schon logisch? ;))
Wenn ich für die Höhe der Division ein height:inherit angebe, stellt FF es genauso dar wie der IE. Wer hat nun recht?
Bei validem Code (s.o.) beide, denn dann beachten beide die nicht angegebene und somit der Höhe des Inhalts entsprechende Höhe des bodys.
Viele Grüße
Patrick