✔ div bekommt mit height:100% nicht die Größe des Parent

Status
Nicht offen für weitere Antworten.
G

gaius-bonus

Grünschnabel
Hallo,

ich verstehe das Verhalten von height:100% nicht.
Laut selfHTML ist % die relative Angabe zum Parent. In meinem Beispiel hat das div "content" aber immer nur Höhe des Textes.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<style type="text/css">
		html { height: 100%; }
		body { height: 100%; }
		
		#center
		{
			min-height: 100%;
			background-color: #ff0000;
		}
		
		#content
		{
			width:994px;
			height: 100%;
			background:url(menuback295.gif) repeat-y;
			background-color: #00ff00;
			text-align:left;
		}
	</style>
</head>
<body style="margin: 0; padding: 0; ">
<div id="center" align="center">
	<div id="content">
		CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
		CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
		CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
	</div>
</div>
</body>
</html>

Was mache ich hier falsch? Eigentlich sollte doch die grüne Box auch bis zum Fensterrand gehen, oder?
 
Hi,

ich empfehle dir diese "Konstruktion":

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <style type="text/css">
                html { height: 100%; }
                body { height: 100%; background-color: #ff0000;}

                #content
                {
                        width:994px;
                        min-height: 100%; /* Mindesthöhe für moderne Browser */
                        height:auto !important; /* !important-Regel für moderne Browser */ 
                        height:100%; /* Mindesthöhe für IE <7 */
                        background:url(menuback295.gif) repeat-y;
                        background-color: #00ff00;
                        text-align:left;
                        margin:0 auto;
                }
        </style>
</head>
<body style="margin: 0; padding: 0; ">

        <div id="content">
                CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
                CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
        </div>

</body>
</html>
 
Schon nicht schlecht, die Notation mit "margin:0 auto" zum Zentrieren war mir neu.
Im FireFox 2.0.0.4 sieht das auch genau so aus, wie ich es gern hätte, aber der IE 7 zickt rum, wenn das Browserfenster größer gemacht wird. Dann ist das Design wieder unter der bisherigen Größe oder am Textende abgeschnitten.
Hast Du auch noch ne Idee, das zu vermeiden?
 
Nein, hab Deinen Code in neue Datei kopiert und grad nochmal wiederholt.
Habe auf 2 Rechnern mit XPSP2 probiert (IE 7.0.5730.11). Beide mit dem Bug.
W2K und IE 6.0.2800.1106 ist alles ok.
 
Das ist dann wohl eher ein Thema für die X-Akten.
Wir reden aber vom selben Versuch? Browser auf 1/4 des Bildschirms verkleinern und dann wieder groß ziehen?

Ich doktor mal mit dem von Dir gegebenen weiter rum. Welchen Effekt verfolgt eigentlich das hight:auto? Ich setze hight danach doch erneut!? "!Important" stellt nur sicher, dass die Anweisung so übernommen wird (Gewichtung mehrerer Angaben)?
 
Hast du etwa die !important-Regel bei height:auto !important weggelassen, die dafür sorgt, dass die modernen Browser die nachfolgende height-Deklaration für die älteren IE-Versionen ignorieren?

Denn ohne sie tritt bei mir auch der Fehler im IE7 auf.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück