✔ Div soll restliche Höhe "auffüllen"

[soyo]

Guten Morgen,

Ich habe eine Konstellation aus drei Blockelementen (Siehe Anhang). Banner und Content 1 haben eine definierte Höhe. Wie bringe ich jedoch Content 2 dazu die restliche ganz aufzufüllen? Content 2 beinhaltet eine Hintergrundgrafik und sollte deswegen komplett dargestellt werden.

Bisher habe ich folgendes HTML/CSS:

<div id="main">
			<div id="banner"></div>
			<div id="content1"></div>
			<div id="content2"></div>
</div>


#main {
	position: relative;
	background: #F00;
	width: 100%;
	height: 100%;
}

#banner {
	height: 80px;
	width: 100%;
	background: #0F0;
}

#content1 {
	height: 310px;
	width: 100%;
	background: #00F;
}

#content2 {
	position: absolute;
	bottom: 0;
	top: 0;
	width: 100%;
	background: #0FF;
}

mfG und schönen Sonntag
soyo

 

[hela]

Hallo,

wenn der BANNER-Block eine Höhe von 80px und der CONTENT1-Block eine Höhe von 310px hat, dann sollte der absolut positionierte CONTENT2-Block bei einer Höhe von 390px und nicht bei Null beginnen. Also z.B. so:

#content2 {
    position: absolute;
    bottom: 0;
    top: 390px;
    width: 100%;
    background: #0FF url(http://style.tutorials.de/v10/slim_showroom.jpg) no-repeat center;
    background-size: contain;
}

Damit das Hintergrundbild den gesamten CONTENT2-Block ausfüllt, müsstest du das mit der BACKGROUND-SIZE-Eigenschaft und dem Wert "contain" oder "cover" skalieren. Das funktioniert beim Internet-Explorer aber erst ab Version 9.

 

[soyo]

Hat funktioniert, danke.