✔ Div-Box: height:100% funktioniert nicht

[Parantatatam]

Hallo, ich bin grade dabei ein dreiteiliges Layout zu entwerfen. Es soll aus 3 Teilen bestehen, die sich übereinander befinden. Dazu brauch ich eine Div-Box die das Attibut "min-height:100%" hat. Das habe ich getestet, bloß blöder weise wird mir dann diese Div-Box nicht angezeigt. Ich sehe sie erst, wenn sie Text enthält und dann hat sie auch nur die Höhe des Textes. Wo liegt das Problem? Und vor allem: wie kann ich es lösen? Ich versuche es schon seit 2 Stunden zu lösen und bin kein bisschen weiter gekommen.

 

[Maik]

Hi,

klingt so, wie wenn für den Viewport (html) und Dokumentkörper (body) die erforderliche height:100%-Deklaration fehlen würde, ansonsten erstreckt sich die Box in der Vertikalen nur so weit, wie es der Inhalt von ihr abverlangt.

Zur Orientierung kannst du ja mal einen Blick in mein Tutorial CSS-Layout mit 100%-Höhe werfen, dem ich vier Beispiele (Ausbaustufen) angehängt habe:

• Basis-Modell
• Modell mit Header
• Modell mit Header und Top-Navi
• Modell mit Header, Top-Navi und Footer

mfg Maik

 

[Parantatatam]

Danke für die schnelle Antwort, aber leider geht es immer noch nicht. Für den BODY habe ich folgende Einstellungen:

body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

EDIT: Ok, ich musste es so umändern:

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
}

 

[Maik]

Wie ich eben darauf hingewiesen hatte, muß auch für das html-Element die Angabe height:100% festgelegt werden - dies ist dann der Fall, wenn das HTML-Dokument den Browsern im standardkonformen Modus übergeben wird.

Mein Tutorial sollte diesen offenen Punkt aber klären.

mfg Maik