div - nach möglichkeit 100% ausfüllen

[AukeArts]

Guten Tag zusammen,
ich habe folgendes Problem. Ich möchte gerne ein Portfolio machen. Dieses Portfolio soll im Grunde aus 4 aufeinander gestapelten divs bestehen. Alle 4 divs gehen 100% in die Breite. 3 von 4 divs haben eine feste Höhe. Das div welche keine hat, soll denn Platz nutzen, der noch übrig ist. Soll heißen, dass Portfolio füllt immer den kompletten Bildschirm des jeweiligen Benutzers.

Bei einem Monitor mit einer Auflösung von 1200 px in die Höhe ist dieser Container 800px hoch, bei einem Monitor mit 1500px in die Höhe ist er 1100px hoch.

Der div soll sich immer relativ zum vorhandenen Bildschrim richten.

Wie stelle ich das ganze an, ohne das ein Scrollbalken entsteht ?

Mit freundlichen Grüßen,
AukeArts

 

[Space Vampire]

so würde es gehen:

html, body{
	margin:0;
	padding:0;
	height:100%;
}
.container1{
	float:left;
	width:100%;
	height:100px;
	background-color:black;
}
.container2{
	float:left;
	width:100%;
	height:100px;
	background-color:red;
}
.container3{
	float:left;
	width:100%;
	height:100px;
	background-color:gold;
}
.container4{
	height:100%;
	background-color:pink;
}

vielleicht hat ja noch jemand ne elegantere lösung

 

[AukeArts]

Danke schonmal für deinen Versuch zu helfen...ABER bei dieser Methode kommt ein Scrolbalken zustande. Ich habe nochmal eine Grafik gemacht um euch zu verdeutlichen, wie ich es genau meine.

 

[Space Vampire]

der scrollbalken kommt aber nicht durch mein codebeispiel!
der kann erst in verbindung mit deinem restlichen code zustande kommen.

 

[AukeArts]

Ja, nach deinem Codebeispiel kommt auch kein Scrollbalken, jedoch bringt mir das ganze nichts.
Der mittlere Container soll sich ja soweit ausbreiten, wie eben möglich.