CSS: Div wird nicht auf 100% höhe gezogen.

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css_div_wird_nicht_auf_100_hoehe_gezogen_174102/page_1 - zur Vollversion wechseln!

semteX schrieb am 31.12.2006 um 13:42

folgendes: klassisches CONTAINER (header - left navi - right content- footer) layout, realisiert in css. jetzt hab ich aber left navi nur ein paar punkte und der right content is sehr lang => der div box der left navi is nur so groß wie der inhalt selbst.. ich hätt jetzt aber gern, dass der auf 100% aufgezogen wird, sich somit an der Höhe vom container - header - footer orientiert... und das bring ich mit css ned hin, obwohl i scho einige "header, body { height: 100%;} trixerein gefunden hätt.

der html teil:

Code: PHP

<body>
<div id="container">
	<div id="header"></div>
	<div id="left"></div>
	<div id="right"></div>
	<div id="footer"></div>
</div>
</body>

css:

Code: PHP

#container {
	width: 800px;
	position: relative;
	left: 50%;
	margin-left: -400px;
	text-align: center;
	margin-top: 20px;
	border: 1px solid #8B4513;
	background-color: #F5F5F5;
	
}
#header {
	position: relative;
	background-image: url(slice.jpg);
	background-position: left;
	background-repeat: no-repeat;
	background-color: #e2d0c4;
	border-bottom: 1px solid #8B4513;
	width: 800px;
	padding-top: 25px;
	height: 125px;
}

#left {
	position: relative;
	height: 100%;
	float: left;
	text-align: left;
	padding-top: 20px;
	/*padding-left: 20px;*/
	width: 170px;
	border: 1px solid black;
	/*background-color: #FAFAD2;*/	
}
#right {
	position: relative;
	text-align: left;
	float: right;
	padding: 20px 20px 20px 20px;
	width: 560px;
	border-left: 1px solid #8B4513;
	background-color: #F5F5F5;
}

#footer {
	clear: both;
}

das ding ist xhtml valide, css file deto. Irgendwer ne idee? vielen dank

Spikx schrieb am 31.12.2006 um 16:12

geht mit

Code: PHP

#left {
	...
	top:0px;
	bottom:0px;
	...
}

Somit wird die Höhe des divs auf die Höhe des nächsten Elternelements mit absoluter oder relativer Positionierung gezogen. Funktioniert im IE aber nicht ohne IEfix... nicht mal im IE 7.0, afaik.

semteX schrieb am 31.12.2006 um 16:20

danke spikx.

die 2. lösung geht folgendermaßen: den container ein hintergrundbild geben und dieses dann links mit repeat-y wiederholen lassn. dieses bild muss dann natürlich auch den border beinhalten..

der header muss dieses hintergrundbild überdeckn, im leftnavi kommts dann wieder raus, im footer muss es wieder überdeckt werden.

ja, es is pfusch, ja, das div ist noch immer ned größer, aber ja es funktioniet.

http://www.dma.ufg.ac.at/app/pane/102.114/module/16931

^== hier das ganze in farbe und mit pixie

Spikx schrieb am 31.12.2006 um 16:25

mäh, div mit top/bottom aufziehen is doch viel schöner

semteX schrieb am 31.12.2006 um 16:28

iefix blahr fasl

jives schrieb am 04.01.2007 um 17:16

http://positioniseverything.net/art...out/equalheight

Oder so
Das funktioniert mit IE4-IE6 (und wahrscheinlich IE7), FF 1.x-2.x, Opera 7 - 9, Safari, Konqueror, und und und, wenn ich mich richtig erinnere.