Webseite soll Browserfenster ausfüllen

[Mauki]

Ich bin gerade dabei an einer Seite zu basteln. Die Seite soll das Browserfenster ausfüllen. In der Breite kein Problem aber wie realisiere ich das mit der Höhe.

Die Box 1, 2 und 5 haben ne feste Höhe und 3 und 4 sollen dynamisch den Rest ausfüllen. Aktuell ist es so das Box 3 und 4 immer nur so hoch sind wie der Inhalt, die sollen aber den übrigen Platz ausfüllen?

Wie mach ich das ?

body {
	margin: 0px;
	padding: 0px;
	font-family: Futura, Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:  #666666;
	}


#container {
	width: 100%;
	height: 100%;
	}

.box1{
	height: 70px;
	background-color: red;
	border-top-color: #FEE07E;
	border-right-color: #FEE07E;
	border-left-color: #FEE07E;
	}

.box2{
	padding:5px;
	padding-left: 10px;
	padding-right:0px;
	background-color: black;
	}

.box3{
	padding:5px; 
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;	
	float:left;
	width:180px;
	height: 100%;
	background-color: lightgrey;
	}

.box4{
	float:none;
	padding:15px 20px 10px 80px;
	height: 100%;
	margin: 0px 0px 0px 145px;
	background-color: white;
	line-height: normal;
	text-align: justify;
	}

.box5{
	background-color: darkgrey;
	height: 15px;
	}

 

[msslovi0]

Nur mit einem Hintergrundbild. Aber was bringt dir 100% Höhe, wenn der Inhalt größer ist als der zur Anzeige zur Verfügung stehende Platz und das ganze daher scrollt?

 

[Mauki]

Nur mit einem Hintergrundbild?

Das Scrollen einzelner Bereiche wäre ok

 

[msslovi0]

Ja, weil die beiden Container nichts voneinander wissen.

Bei deinem aktuellen CSS läuft auch der Text einfach über den Fußbereich (box5) raus, wenn er länger wird als die initial geladenen 100%.

 

[Mauki]

Gibt es ne Alternative zu meinem CSS?

 

[msslovi0]

Kommt drauf an, was du erreichen willst.
http://www.blogpotato.de/wp-content/uploads/misc/fixed.html wäre eine Möglichkeit. Außer im IE, der peilt 'fixed' nicht richtig.

		padding:5px; 
		padding-top: 15px;
		padding-right: 10px;
		padding-bottom: 10px;
		padding-left: 10px;

ist sinnlos, da du die padding-Einstellung nachher wieder komplett überschreibst. Die width von 180px + padding bei box3 ergibt auch keinen Sinn, wenn du den margin von box4 nur auf 145 setzt. Borderfarben anzugeben, ohne Dicke und Stil für die Border zu definieren wird kein sichtbares Ergebnis bringen. Von exotischen Farbnamen wir lightgray solltest du Abstand nehmen, wenn es in allen Browsern funktionieren soll.