Moin Moin,
kurze Frage an die CSS Experten:
Ich möchte eine Seite immer auf eine Höhe von 100% des Bildschirms darstellen. Im Grunde weiter kein Problem.
ABER:
Wenn ich im ersten DIV Element ein zweites DIV Element platziere (welches den eigentlichen Content enthalten soll) und dieses die eigentliche Höhe des ersten DIV überschreitet überlappen diese beiden Elemente. Hier ein vereinfachter HTML ausschnitt:
Ich denke Ihr habt das Problem erkannt
Ich möchte nun erreichen, dass das hintere, rote Element sich immer weiter mit nach unten hin vergrößert.
Wie kann ich das erreichen?
Danke &Gruß
kurze Frage an die CSS Experten:
Ich möchte eine Seite immer auf eine Höhe von 100% des Bildschirms darstellen. Im Grunde weiter kein Problem.
ABER:
Wenn ich im ersten DIV Element ein zweites DIV Element platziere (welches den eigentlichen Content enthalten soll) und dieses die eigentliche Höhe des ersten DIV überschreitet überlappen diese beiden Elemente. Hier ein vereinfachter HTML ausschnitt:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<style type="text/css"><!--
html {height:100%;}
body {
height:100%;
margin:0%;
padding:0%;
}
div#container_rot {
background: #FF0000;
margin:0% 3%;
padding:0% 1%;
border:1px solid #000000;
min-height:100%;
height:auto;
height:100%;
}
div#container_grau {
position:absolute;
left:200px;
top:150px;
background: #888888;
margin:0% 3%;
padding:0% 1%;
height:100%;
border:1px solid #000000;
}
//--></style>
</head>
<body>
<div id="container_rot">
<div id="container_grau">
<h1>Div-Container. Höhe 100%</h1>
<div id="container_grau">
<h1>Div-Container. Höhe 100%</h1>
</div>
</div>
</div>
</body>
</html>
Ich denke Ihr habt das Problem erkannt

Ich möchte nun erreichen, dass das hintere, rote Element sich immer weiter mit nach unten hin vergrößert.
Wie kann ich das erreichen?
Danke &Gruß