florian g walther: 100% hohe <div> zu hoch

Hallo Allerseits,

Ich moechte gerne eine relative Höhenangabe auf ein <div> anwenden; dabei tritt nun leider das Problem auf, das zumindest IE5 Mac bei korrekt gesetztem Doctype die <div> viel zu hoch anzeigt, quirkend jedoch alles korrekt.
Ist das ein Bug oder korrekt? Und kann man irgendwas dagegen tun, oder nicht, und tritt das Problem nur auf dem Browser auf oder sind IE5 für PC auch davon betroffen?

Vielen Dank schonmal im Vorraus, florian.

  1. hi,

    wenn du "100%" als höhe für ein div angibst, dann versteht der browser die 100% als maximale höhe, die in seinem browserfenster anzeigbar ist.
    hast du also ein browserfenster, welches die maße 500x500px hat, wird ein 100%-hohes div immer 500 pixel lang sein.
    der knackpunkt ist aber, dass wenn das div nicht direkt an oberster stelle steht, sondern z.b. +100 pixel unter dem seitenanfang, wird es folgende y-werte erhalten: y-anfang: +100px, y-ende: +600px.

    Ist das ein Bug oder korrekt? Und kann man irgendwas dagegen tun, oder nicht, und tritt das Problem nur auf dem Browser auf oder sind IE5 für PC auch davon betroffen?

    ehrlich gesagt weiss ich nicht, ob das sinnvoll ist, dass die browser das so rendern - aber jedenfalls tun das alle gängigen so (MSIE, Mozilla, Opera).

    eine funktionierende lösung wird nur eine absolute größenangabe in pixeln sein.

    gruß,
    mcmoe

    1. hallo,

      hast du also ein browserfenster, welches die maße 500x500px hat, wird ein 100%-hohes div immer 500 pixel lang sein.
      der knackpunkt ist aber, dass wenn das div nicht direkt an oberster stelle steht, sondern z.b. +100 pixel unter dem seitenanfang, wird es folgende y-werte erhalten: y-anfang: +100px, y-ende: +600px.

      das ist mir auch klar, aber an der stelle gar nicht das problem. ich hadere vielmehr damit, dass der  viel & oft als besonders standard-kompatible ie5 für mac os eine <div>, die die gesamte fensterhöhe für sich alleine hat, bei einer prozentualen höhenangabe immer zu hoch ist (meiner meinung); und das eben nur bei einem gueltigen doctype, im quirk-modus passt alles. also:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
      <title>100percent</title>
      <style type="text/css" media="all">
      body
      {
      color: #ccc;
      background: #ddd;
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      }
      .out
      {
      margin: 0px;
      padding: 0px;
      height: 100%;
      width: 100%;
      background: #7766ff;
      }
      </style>
      </head>
      <body>
      <div class="out">
       
      </div>
      </body>
      </html>

      sollte sie blau <div> auf der größe des gesamten fensters zeigen, ohne scrollbalken. ie6, gecko, opera6 pc und opera 5 mac tun das auch allesamt so, wie ich mir das vorstelle.

      Ist das ein Bug oder korrekt? Und kann man irgendwas dagegen tun, oder nicht, und tritt das Problem nur auf dem Browser auf oder sind IE5 für PC auch davon betroffen?

      was mich immer noch interessiert.

      gruß, florian.

      1. ähm...:

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

        war natuerlich schwachsinn, vom rumprobierem uebriggeblieben. muss am besten heissen

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        danke! :)

        1. hallo,

          mein IE5.5SP2 PC zeigt das div im gesamten fenster an, aber mit [in-aktivem] scrollbalken...

          Malte

          1. hallo,

            mein IE5.5SP2 PC zeigt das div im gesamten fenster an, aber mit [in-aktivem] scrollbalken...

            danke für die information.

            gruß, florian.

  2. hi

    Ich moechte gerne eine relative Höhenangabe auf ein <div> anwenden; dabei tritt nun leider das Problem auf, das zumindest IE5 Mac bei korrekt gesetztem Doctype die <div> viel zu hoch anzeigt, quirkend jedoch alles korrekt.

    das Problem dürfte sein, dass es am Rand noch ein padding bzw. margin von idr. 8 Pixeln gibt.

    Ist das ein Bug oder korrekt? Und kann man irgendwas dagegen tun, oder nicht, und tritt das Problem nur auf dem Browser auf oder sind IE5 für PC auch davon betroffen?

    der IE5/Win verrechnet sich bei soetwas eh dauernd, so dass ein Layout, welches dort passt, es dann in mehr oder weniger keinem anderen Browser tut.

    Mit body{padding:0px;margin:0px;} in der CSS-Datei sollte sich das Problem lösen lassen. Das padding ist eine Marotte von Opera 5 und 6.
    MSIE4/win und MSIE5/win berechnen width und height übrigens immer etwas schief und zu klein, da man border und co davon abzieht. MSIE5/Mac und MSIE6/Mac machen dies im Quirks-Mode, mit gültigem DOCTYPE ist Ruhe. Alle anderen aktuellen Browser rechnen width unabhängig des border oder margin (was so auch die HTML-Spec vorschreibt.)
    Über MSIE4/Mac und Netscape4 schweigen wir besser. :)

    Grüße aus Lüneburg

    Kai