Ich hab das Problem mal auf den Punkt gebracht. Öffne mal diese Seite in deinem Browser Viewport-Demo:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="background:gray" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Viewport-Demo</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body style="background:red;padding:20px">
BODY
<div style="background:lightgreen">
DIV ohne Breitenangabe
</div>
<div style="background:yellow;width:968px">
DIV mit Breitenangabe 968px
</div>
</body>
</html>
Wenn du die Breite des Browserfensters jetzt kleiner ziehst, siehst du, dass sowohl HTML als auch BODY ihre Breite nicht an dem breitesten Inhalt berechnen, sondern an dem Viewport. (HTML kannst du nur mit Firebug kontrollieren, BODY erkennst du schon an der Farbe Rot).
Der obere DIV ohne Breitenangabe kann nur so groß sein wie BODY, und das ist es. HTML oder/und BODY eine Breite von 100% zu geben bringt nix, die haben sie sowieso schon.
Deaktiviere mal mit Firebug das Grau von HTML, dann siehst du noch einen seltsamen Effekt. Obwohl der BODY nur z.B. eine Breite von 700px hat (je nachdem wie klein du das Fenster gezogen hast) und eine Höhe von 116px, erstreckt sich das Rot jetzt über die gesamte Hintergrundfläche. Verrückt, ne?
Wie man das jetzt in den Griff bekommt, um deinen erwähnten unschönen Effekt zu beseitigen, weiß ich leider auch nicht, hab ne ganze zeitlang ausprobiert ohne positives Ergebnis.
Gruß, Andreas
Lesezeichen