Hallo,
habe ich einen Bug im Opera gefunden? Auf jeden Fall verhält er sich sehr seltsam...
Als Beispiel folgendes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body, html
{
height:100%;
width:100%;
margin:0px;
}
#maindiv
{
width:770px;
min-height:100%;
background-color:green;
margin-left:auto;
margin-right:auto;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#maindiv
{
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="maindiv">
Inhalt
</div>
</body>
</html>
Das ganze funktioniert in eigentlich allen aktuellen Browsern wie's soll - ein div zentriert in der Mitte, die Höhe ist 100% der Fensterhöhe, der Hintergrund des div wird auch dann angezeigt, wenn dessen Inhalt die Fensterhöhe überschreitet, also man scrollt.
Sonst habe ich sowas mit Tabellen gemacht, wollte es jetzt aber mal mit divs versuchen und hab' mich schon gefreut, endlich dank Conditional Comment etwas gefunden zu haben, was tatsächlich überall so funktioniert wie ich mir das vorstelle...
...und jetzt kommt der Opera (hier als Testversion 9.22) :-(
Die 100%-Höhe des div wird nur dann angepasst, wenn man das Opera-Fenster sowohl in der Höhe als auch in der Breite verändert. Verändert man nur die Fensterhöhe über den unteren Balken, wird das div nicht automatisch mit verkleinert/vergrössert. In meinem Beispiel hat das zur Folge, dass beim Vergrößern der Höhe des Fensters der grüne Hintergrund an den "vorherigen 100% Fensterhöhe" endet, verkleinert man es wieder, verkleinert sich das div nicht mit und es werden Scrollbalken angezeigt.
Setze ich das div auf position:absolute, funktioniert es faszinierenderweise... nur dann funktioniert die Zentrierung des divs über die margins weder im Opera noch woanders.
Es ist zum Mäusemelken... :-( Ist das ein Bug im Opera oder irgendein spezieller Sonderfall, den man irgendwie umgehen/lösen kann? Oder hab' ich irgendwo einen Denkfehler?
Gruß,
Christian