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

semteX

begehrt die rostschaufel

Registered: Oct 2002
Location: Pre
Posts: 14594

31.12.2006 - 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

Bearbeitet von semteX am 31.12.2006, 16:21

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

31.12.2006 - 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

begehrt die rostschaufel

Registered: Oct 2002
Location: Pre
Posts: 14594

31.12.2006 - 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

Bearbeitet von semteX am 31.12.2006, 16:30

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

31.12.2006 - 16:25

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

semteX

begehrt die rostschaufel

Registered: Oct 2002
Location: Pre
Posts: 14594

31.12.2006 - 16:28

iefix blahr fasl

jives

And the science gets done

Registered: Sep 2001
Location: Baden
Posts: 3548

04.01.2007 - 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.

semteX begehrt die rostschaufel Registered: Oct 2002 Location: Pre Posts: 14594	31.12.2006 - 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 Bearbeitet von semteX am 31.12.2006, 16:21
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	31.12.2006 - 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 begehrt die rostschaufel Registered: Oct 2002 Location: Pre Posts: 14594	31.12.2006 - 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 Bearbeitet von semteX am 31.12.2006, 16:30
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	31.12.2006 - 16:25 mäh, div mit top/bottom aufziehen is doch viel schöner
semteX begehrt die rostschaufel Registered: Oct 2002 Location: Pre Posts: 14594	31.12.2006 - 16:28 iefix blahr fasl
jives And the science gets done Registered: Sep 2001 Location: Baden Posts: 3548	04.01.2007 - 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.

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

Forum Index > Software > Coding Stuff

semteX

Spikx

semteX

Spikx

semteX

jives