Danke für die fixe Antwort. Das Ganze funktioniert im Safari 5 und Firefox 3.6 perfekt (abgesehen von der Breite, overflow: auto. Das content-DIV ist nur so breit wie sein Inhalt. Lässt sich aber mit width: 100% und ohne das Overflow-Tag ausbügeln).
Problematisch ists nur mit dem IE6 & IE8. Da ist das root-DIV nur so hoch und so breit wie sein Inhalt. Gibt es da eine Lösung die mit Safari, Firefox und IE(ab 7 oder 8 meinetwegen - IE6 Support ist mir egal) funktioniert?
Hier einmal die Screenshots:
richtigerweise im Safari/Firefox:
Code:
http://img683.imageshack.us/i/bildschirmfoto20110424ue.png
Problem im IE8:
(Das content-DIV füllt nicht den restlichen Bereich des grünen root-DIVs)
Code:
http://img703.imageshack.us/i/bildschirmfoto20110424us.png/
Und hier nochmal der Code wie er im moment ist:
Code:
<html>
<head>
<style>
body{
margin: 0px;
padding: 0px;
}
.root{
width: 100%;
height: 100%;
/*Die Farben sollen nur die Bereiche kenntlich machen*/
background-color: green;
}
.menu{
height: 3.7em;
background-color: red;
}
.content{
position: absolute;
top: 3.7em;
bottom: 0em;
/*overflow: auto; - Funktioniert nicht. Deswegen das width-Tag*/
width: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="root">
<div class="menu">
Menu
</div>
<div class="content">
Content
</div>
</div>
</body>
</html>
Gruß
Daniel