nicht angemeldet
<div> lässt sich nicht auf 100% höhe setzen
Hallo allerseits,
ich habe folgendes Problem das Layout das ich geplant habe basiert auf einem div der immer 100% der Bildschirmhöhe haben soll. Wenn ich jetzt aber direkt im <body> einen <div> deklariere und ihm per css eine Höhe von 100% zuweise hat er gar keine Höhe.
Ich hab hier mal ein Code-Bsp:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#test {
border:solid 1px #000000;
background-color:#FFCC00;
width:100px; height:100%;}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
-
Hallo,
Wenn ich jetzt aber direkt im <body> einen <div> deklariere und ihm per css eine Höhe von 100% zuweise hat er gar keine Höhe.
Doch, hat er, nämlich "auto".
Höhenangaben in Prozent beziehen sich auf die Höhe des übergeordneten Elementes. Haben diese noch ihren Initialwert "auto", so wird der Prozentwert selbst auch zu "auto". Erst ein Prozentwert für das root-Element (also html) bezieht sich auf den "initial containing block" (also die Browserfensterhöhe).
siehe auf http://www.w3.org/TR/CSS21/visudet.html#the-height-property das Gesagte zu "percentage".
Das weitere Vorgehen wird daraus hoffentlich klar. Du mußt allen übergeordneten Elementen eine explizite Höhenangabe mitgeben.
Viele Grüße
Carsten-
Danke, funktioniert jetzt...
-