nicht angemeldet
hallo zusammen.
komme nicht mehr weiter. magst du mal schauen?
anforderung:
- 4 divs untereinander.
- "oben": hat feste höhe. klappt.
- "bild": hat 30 % höhe und breite 100%. klappt (gesamtgröße passt sich an browserbreite automatisch an. so solls sein).
- "mitte": hat 70% höhe ....klappt nicht. liegt HINTER der "bild"-div. soll aber darunter anfangen. und genau DAS krieg ich nicht hin.
- "unten": hat feste höhe, ist immer unten. klappt.
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
margin: auto auto;
min-height: 100%;
position: relative;
}
* html #wrapper {height: 100%;} /* IE Hack für 100 % Höhe */
#oben {
height:100px;
background:#285a72;
}
#bild {
width: 100%;
height: 30%;
background-image: url('b-tunnel.jpg');
background-repeat:no-repeat;
background-position: center;
background-size: 100% auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
}
#mitte {
margin-bottom: 2em;
float: left;
}
#unten {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background:#285a72;
}
* html #unten {bottom: -1px;} /* Nächster IE Hack, da bottom: 0; als bottom: 1px interpretiert wird */
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>HIIIIIILFEEEEEEEE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="oben">oben
</div>
<div id="bild">
</div>
<div id="mitte">
Lorem ipsum dolor sit amet, ...
</div>
<br style="clear: both;" />
<div id="unten">
Erdgeschoss !
</div>
</div>
</body>
</html>
Gunnar Bittersmann
TS
MudGuard
Tabellenkalk
Matthias Apsel