Opera, 100%-Elemente und Fensterhöhe
0 
molily
Opera, 100%-Elemente und Fensterhöhe
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
-
Hallo,
habe ich einen Bug im Opera gefunden?
Ja.
Du kannst höchstens durch irgendeine unsinnige Änderung einer CSS-Eigenschaft einen Reflow erzwingen. Das geht etwa über JavaScript, indem man display:block auf display:inline-block setzt und umgekehrt, was an der Darstellung nix ändert. (Direkt nen Reflow anstoßen geht m.W. nicht.)<script type="text/javascript"> [code lang=javascript]window.onresize = window.opera ? function () { window.flag = !window.flag; document.body.style.display = window.flag ? "inline-block" : "block"; } : window.onresize;</script>[/code]
Würde ich das so produktiv einsetzen? Nein. ;) Mir wäre der Bug ziemlich egal. Allerdings könnte man noch sinnigere Abfragen machen, z.B. die offsetHeight des maindivs mit window.innerHeight vergleichen. Wenn letztere kleiner wird, dann ist ein Reflow angesagt.
Mathias
-
Hallo,
ja, mit JS hab' ich sowas auch schon mal gemacht, aber:
Würde ich das so produktiv einsetzen? Nein. ;)
kann ich nur zustimmen :-)
OK, dann ist es ein Bug, kann man machen nix...
Dank und Gruß,
Christian
-
Hallo,
OK, dann ist es ein Bug, kann man machen nix...
Doch, Seite neu laden ... ;-)
So häufig kommt es ja auch nicht vor, daß man während des Surfens seine Browserfenstergröße verändert. Ich würde also auch nichts weiter unternehmen.
Viele Grüße
Carsten
-
-