✔ CSS Verständnisproblem

Status
Nicht offen für weitere Antworten.
A

angelikamorgan

Mitglied
Hallo,

ich habe ein Verständnisproblem.

Ich habe die folgende Abbildung per CSS erstellt:

http://s5.directupload.net/images/080613/2gw8zbc2.jpg

um mein Vorhaben zu realisieren, habe ich für html und body die höhe angeben müssen.

Meine Frage: Weshalb muss ich sowohl für html als auch für body die Höhe angeben? Weshalb ist es nicht ausreichend, wenn man nur die Höhe von body oder html angibt?
Am Anfang bin ich davon ausgegangen, dass es sogar ausreicht, wenn ich für den div die Höhe angebe.

Gruß und Dank im Vorraus
Angelika

Code: 
<html>

<head>
    <style type="text/css">
		html {
			height:100%;
			background-color: red;
		}

		body {
			height:100%;
			background-color: yellow;
		}
			
		div#test {
		 height:100%;
		 border-left:1px solid #000000;
		 border-right:1px solid #000000;
		 margin: 0 10% 0 10%;
		}
	</style>
</head>

<body>
	<div id="test"></div>
</body>

</html>
 
Hi,

die Höhe wird immer gleichermaßen für den Viewport (html) und Dokumentkörper (body) deklariert, was im "Standardsmode" (Doctype-Variante "Strict") sogar unerlässlich ist, damit das Strecken der Boxenhöhe auf 100% überhaupt funktioniert.

mfg Maik
 
Das ist abhängig von Browser und DOCTYPE.

Mal rein von der Logik herangegangen....ein Element ist ja standardmässig so gross, wie es ihm der Inhalt abverlangt...bei prozentualen Grössenangaben beziehen sich diese auf das Elternelement.

Also...Schritt für Schritt:
  1. Das Div hat keinen Inhalt, und eine Höhenangabe von 100%...also schaun mer mal im <body> nach, wie gross der Ist, und nehmen davon 100%
  2. Angekommen im <body>....Ooops, der hat auch keinen Inhalt, nur ein leeres DIV und das verbraucht keinen Raum....wie also die 100% berechnen? Mal gucken wie gross <html> ist :-)
  3. Ganz oben bei <html> angekommen...die Ernüchterung: hier steht keine Höhenangabe drin. Wie gross ist es also nun?
    Da es keinen raumgreifenden Inhalt hat, ist es 0px hoch :suspekt:
  4. Der <body> erhält jetzt 100% der Höhe von <html>...100% von 0px sind 0px
  5. Das <div> erhält jetzt 100% der Höhe von <body>...100% von 0px sind 0px
Ergo: ohne die 100% in <html> hätte das <div> 0px Höhe.
Soweit grob beschrieben die Theorie, welche halt je nach Browser und DOCTYPE die Praxis darstellt.

Ich hoffe das war ein wenig verständlich :-(
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück