DIV wird trotz 100% height im CSS nicht mit voller Höhe angezeigt
Aus ITwiki
Problem[Bearbeiten]
Im CSS wurde ein DIV mit
height: 100%
definiert und es wird trotzdem nicht mit 100% Höhe angezeigt.
Lösung[Bearbeiten]
Das DIV wird deshalb nicht mit 100% Höhe angezeigt, da die übergeordneten Elemente (HTML und BODY) nicht mit 100% Höhe definiert wurden.
Hier ein Beispiel mit einem DIV wie diesem:
<!DOCTYPE HTML>
<html>
<head>
<title>Mein DIV mit voller Höhe</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="content">...</div>
</body>
</html>Und die main.css sieht dann folgendermaßen aus:
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#content {
margin: auto; /* Div soll zentriert werden */
height: 100%; /* volle Höhe */
background-color: #868D35;
width: 800px;
}