biesi: DIV-Box immer in Höhe des Browserfensters - wie?

Hallo,

ich möchte mit XHTML und CSS eine in der mitte des Browserfensters zentrierte <div>-Box (als direktes Kindelement von <body>) mit festgelegter Breite erzeugen - als 'Container' für den eig. Seiteninhalt.

Ich hätte dabei gerne, das diese <div>-Box immer mindestens genauso hoch ist wie das Browserfenster, auch wenn sich noch kein oder nur wenig darin befindet.

Hier die dazugehörige Regel:

#main {
width: 770px;
top: 0px;
margin-left: auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
height: 100%;
}

Ich dachte, height: 100% müßte genau das bewirken, was ich möchte, aber das funzt nicht - sowohl in Firefox als aich in IE ist das <div> immer nur so hoch wie sein Inhalt.

Kann mir da jemand weiterhelfen?

Vielen Dank schonmal,
biesi

  1. Hallo biesi.

    Ich dachte, height: 100% müßte genau das bewirken, was ich möchte, aber das funzt nicht - sowohl in Firefox als aich in IE ist das <div> immer nur so hoch wie sein Inhalt.

    Naja, worauf sollen sich die 100% denn auch beziehen?

    Gruß, Ashura

    --
    Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
    Try it: Become an Opera Lover in 30 days
    1. Hallo biesi.

      Ich dachte, height: 100% müßte genau das bewirken, was ich möchte, aber das funzt nicht - sowohl in Firefox als aich in IE ist das <div> immer nur so hoch wie sein Inhalt.

      Naja, worauf sollen sich die 100% denn auch beziehen?

      Gruß, Ashura

      Ich dachte, auf das jeweilige Elternelement, oder nicht?
      Und wenn nicht, was fange ich dann sonst generell mit Prozentangaben an? Die sind doch immer relativ zu was anderem.

      Nur, das hilft mir bei meinem konkreten Problem auch nicht weiter...

  2. Ich dachte, height: 100% müßte genau das bewirken, was ich möchte, aber das funzt nicht - sowohl in Firefox als aich in IE ist das <div> immer nur so hoch wie sein Inhalt.

    Kann mir da jemand weiterhelfen?

    HUHU,
    Goggle sagt http://www.google.de/search?hl=de&ned=de&ie=UTF-8&q=%25+prozentangaben+css&btnmeta%3Dsearch%3Dsearch=Web-Suche:

    html, body {
      height:100%;
    }

    Vielen Dank schonmal,
    biesi

    immer wieder

    achJA?

    1. Ich dachte, height: 100% müßte genau das bewirken, was ich möchte, aber das funzt nicht - sowohl in Firefox als aich in IE ist das <div> immer nur so hoch wie sein Inhalt.

      Kann mir da jemand weiterhelfen?
      HUHU,
      Goggle sagt http://www.google.de/search?hl=de&ned=de&ie=UTF-8&q=%25+prozentangaben+css&btnmeta%3Dsearch%3Dsearch=Web-Suche:

      html, body {
        height:100%;
      }

      Vielen Dank schonmal,
      biesi
      immer wieder

      achJA?

      Hallo achJA,
      tausend dank - das war's!

      ...Da soll aber auch einer drauf kommen, das man den Elternelementen <body> und <html> die Höhe von 100% auch noch mal explizit zuweisen muß... aber jetzt klappt's.

      Viele Grüße + ein schönes Wochenende,
      biesi

    2. Heißa, achJA?,

      html, body {
        height:100%;
      }

      Und bitte margin und padding auf 0 setzen, da es sonst möglicherweise unnütze Scrollbalken gibt.

      Caramba!
      Grüße aus Biberach Riss,
      Candid Dauth (ehemals Dogfish)

      --
      „Tue niemals etwas ausschließlich weil es jemand anderer tut – auch wenn dieser unter deiner tiefsten Verehrung steht.“ | Mein SelfCode
      http://cdauth.net.tc/