Harald: div Höhen im Wechsel fluid und fest (überhaupt lösbar?)

Beitrag lesen

SELF-Forum

div Höhen im Wechsel fluid und fest (überhaupt lösbar?)

Harald
– Informationen zu den Bewertungsregeln

Hi Leute!
Wer weiß Rat?
Wie bekomme ich aufeinander folgende div's im Wechsel fluid und fest, und zwar auch so, dass der IE mitspielt?
Wollts auch gern ohne nen leidigen Container-div machen. Hasse immer dieses "body (oder gar *) blooß erst mal auf margin: 0; und padding: 0; setzen und blooß erst mal einen Container-div machen (am besten auch noch auf margin: 0; und padding: 0; setzen) usw.". Der body ertreckt sich ja jetzt schon auf die Höhe vom Ende der Header-Linie bis zum Anfang der Footer-Linie (ohne height bzw. mit margin).
Ich habe schon mal so eine Seite gesehen und (!) das im IE.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">  
	<head>  
		<meta content="application/xhtml+xml; charset=utf-8" http-equiv="content-type" /> <meta content="application/xhtml+xml" name="dc.format" scheme="MIME" />  
		<title>Test</title> <meta content="Test" name="dc.title" />  
	</head>  
	<body style="margin: 22px 0 22px;">  
		<div style="position: fixed; top: 0; width: 100%; height: 20px; color: inherit; background-color: green;">  
			Header  
		</div>  
		<hr style="margin-top: 0; border: none; position: fixed; top: 20px; left: 0; width: 100%; height: 2px; color: inherit; background-color: darkgray;" />  
		<div style="color: inherit; background-color: yellow;">  
			Dieser Block soll in der H&#0246;he fluid sein (bei senkrechtem Ziehen des Browserfensters).  
		</div>  
		<div style="height: 50px; color: inherit; background-color: lightgray;">  
			Dieser Block soll seine H&#0246;he behalten.  
		</div>  
		<div style="color: inherit; background-color: yellow;">  
			Dieser Block soll in der H&#0246;he fluid sein (bei senkrechtem Ziehen des Browserfensters).  
		</div>  
		<div style="height: 40px; color: inherit; background-color: lightgray;">  
			Dieser Block soll seine H&#0246;he behalten.  
		</div>  
		<div style="color: inherit; background-color: yellow;">  
			Dieser Block soll in der H&#0246;he fluid sein (bei senkrechtem Ziehen des Browserfensters).  
		</div>  
		<div style="height: 30px; color: inherit; background-color: lightgray;">  
			Dieser Block soll seine H&#0246;he behalten.  
		</div>  
		<div style="color: inherit; background-color: yellow;">  
			Dieser Block soll in der H&#0246;he fluid sein (bei senkrechtem Ziehen des Browserfensters).  
		</div>  
		<hr style="margin-bottom: 0; border: none; position: fixed; bottom: 20px; left: 0; width: 100%; height: 2px; color: inherit; background-color: darkgray;" />  
		<div style="position: fixed; bottom: 0; width: 100%; height: 20px; color: inherit; background-color: green;">  
			Footer  
		</div>  
	</body>  
</html>

Gruß Harald

Beitrag melden
–
Informationen zu den Bewertungsregeln