tahrqa
Threadersteller
Dabei seit: 18.11.2007
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 22.08.2008 14:13
Titel verschachtelete divs mit 100% Höhe |
|
|
Hallo,
ich bin auf der Suche nach einer Lösung für folgendes Problem:
Ich habe zwei div Container, die ineinander verschachtelt sind. Nun soll jeder dieser Container 100% Höhe des Browserfensters ausfüllen.
Warum will ich das so haben?
Der eine Div-Container soll ein Hintergrundbild enthalten, das am Unteren Ende positioniert ist. Container Nr 2 soll ein Hintergrundbild haben, das sich auf der y-Achse wiederholt, je nach Höhe des Containers.
Ich habe schon herumprobiert, komme aber zu keinen Ergebnis.
Der folgende Code macht das schon ganz gut. Nur wenn der Container mehr Text enthält, sodass man scrollen muss funktioniert es nicht mehr. Ich habe den inneren Container dazu mal etwas schmaler gemacht, dann sieht man den Fehler besser (orange wird nicht länger).
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
/* mac hide\*/
html, body {height:100%}
/* end hide */
body {
padding:0;
margin:0;
min-width:870px;/* for mozilla*/
background-color: #f4f4f4;
color: #000000;
}
#outer_wrapper{
height:100%;
min-height:100%;
width:870px;
margin:auto;
position:relative;
background-color:#f90;
}
html>body #outer_wrapper{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
#outer{
height:100%;
min-height:100%;
width:860px;
color: #000000;
text-align:left;
position: absolute;
background-color:#00F;
font-family: verdana, aria sans-serif;
font-size: 12px;
}
html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="outer">
123
</div>
<!-- end outer div -->
</div>
<!-- end outer_wrapper div -->
</body>
</html>
|
|
|