Hallo,

Ich habe einen Container, der die Seite in 3 Teile unterteilt: Header, Content & Footer, welche zusammen immer genau 100% des Fensters ausmachen.

Nun möchte ich einen Div im Content-Feld platzieren, der genau so hoch ist, wie das Content-Feld.

Doch mit height: 100% ist der Container jeweils grösser:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<style type="text/css">

html,body {
	margin:0;
	padding:0;
	height:100%; /* needed for container min-height */
	background:gray;
	
	font-family:arial,sans-serif;
	font-size:small;
	color:#666;
}



#Container {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	width:914px;
	background:#f0f0f0;
	
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/

	min-height:100%; /* real browsers */
}

#Header {
	height:50px;
	width: 914px;
	background-color: #FF0000;
}

#Footer {
	position:absolute;
	width:100%;
	bottom:0; /* stick to bottom */
	background-color: #feb400;
	height: 30px;
}

#Test
{
	position:absolute;
	width: 110px;
	height: 100%;
	background-color: #000000;
}
</style>


<div id="Container">
		<div id="Header">Header</div>
		<div id="Content">
			<div id="Test">Test</div>
		</div>
		<div id="Footer">Footer</div>
</div>

aNtiCHrist

Entweder verschiebst du die Box entsprechend nach oben, setzt den z-index und regelst das mit dem Inhalt über ein zusätzliches Kindelement mit entsprechendem margin/padding oder aber du lässt das height weg und nutzt nur top und bottom. Das versteht dann aber iirc der IE nicht.

rotti

Hi

Wie kriege ich das hin, dass meine Box minimal 500px hoch ist, aber bei mehr Text sich automatisch vergrössert?

Vielen Dank für deine Antwort.

Kirby

Zitat:

Zitat von rotti

Hi

Wie kriege ich das hin, dass meine Box minimal 500px hoch ist, aber bei mehr Text sich automatisch vergrössert?

Vielen Dank für deine Antwort.

Code:

#box {
  min-height: 500px;
}

/*Hack für IE6*/
* html #box {
  height: 500px;
}

Anzeige

Anmelden

Weitere Tipps