Kai: Division mit Höhe (height:100%) im Internet Explorer

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

  1. 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

    --
    "Though this be madness, yet there's method in't."
    sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[
    1. 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

      1. 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

        --
        "Though this be madness, yet there's method in't."
        sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[