Volle Höhe des Elternelements

1 NeoMiC (Ex-Mitglied)

Hallo,

ich habe vor kurzer Zeit wieder mit HTML und CSS angefangen, nun habe ich ein Problem was ich nicht lösen kann...

		<div style="background-color:#DCDCDC">
			<div style="background-color:#000000;width:200px;float:left;height:inherit;">
				<div style="margin:10px;">
					<div style="background-image:url([dir]/images/gradient3.png);padding:5px;">
						kalender
					</div>
					<div style="background-color:#AAAAAA">
						[kalender]
					</div>
				</div>
				
				[template_switch]
			</div>
			<div style="background-color:#000000;width:200px;float:right;height:inherit;"> 
			</div>
			<div style="margin-left:200px;margin-right:200px;padding:10px;height:inherit;">
				[index]
			</div>
			<div style="clear:both"></div>
		</div>

Nun bekomme ich es nicht hin das alle 3 div Container mit dem "height:inherit" so groß sind wie das div darüber, sodass die backgroundcolor auf der vollen fläche sichtbar ist :(

für einen besseren überblick:

http://www.brainless-gaming.de/v2/

2 Jörg Kruse

Wenn du die Gesamthöhe des kompletten Anzeigebereiches ausschöpfen möchtest, musst du für alle Elternelemente eine Höhe von 100% definieren:

html, body {
height:100%;
}

... ebenso beim äußersten div:

<div style="background-color:#DCDCDC; height:100%">

... dann sollten die Hintergrundfarben bis zum unteren Rand des Browserfensters durchgehen

3 NeoMiC (Ex-Mitglied)

Das habe ich gemacht, aber jetzt ist der Kasten so groß wie der gesamte body und überschneidet den footer:

http://www.brainless-gaming.de/v2/

4 Jörg Kruse

Naja, du hast wie gewünscht die "volle Höhe des Elternelements". In dem Fall macht diese Vorgabe aber wohl wenig Sinn, da die Höhe von Header und Footer noch hinzukommen und die Gesamthöhe damit mehr als 100% beträgt.

Wenn es dir darum geht, dass der graue Hintergrund unabhängig vom Inhalt bis zum Footer reicht, kannst du den Hintergrund auch dem übergeordneten Element zuweisen. Wenn du eine (1 pixel hohe) Hintergrundgrafik nimmst, kannst du mithilfe der Eigenschaft background-position den linken Rand für die Navigation freilassen. Anschließend überdecken Header und Footer mit ihren Hintergrundfarben den grauen Bereich und die Navigation liegt über dem Bereich, der nicht grau ist

5 NeoMiC (Ex-Mitglied)

Klappt das dann auch wenn die Navi höher ist als der Content?

6 Jörg Kruse

Ja. Du kannst das auch so machen, dass das übergeordnete Element zwei Hintergrundfarben hat. Mit background-color definierst du die Hintergrunbdfarbe der Navigation. Mit background-image und background-position definierst du wie oben beschrieben den Hintergrund des Contentbereichs. Wie hoch der Navigationsinhalt oder der Inhalt des Contentbereicha sind, ist egal, da die Hintergründe zum Eltern-Element gehören, welches mindestens so hoch ist, wie das höhere Element von beiden.

7 NeoMiC (Ex-Mitglied)

K, ich versteh nur noch nicht ganz wie ich das mit background-position machen soll und wie groß das Bild sein soll...

Weil bei repeat ist bei mir alles voll :>

<div style="background-color:#DCDCDC;background-image:url([dir]/images/gradient1.png);background-position:200px 0px;">
	<div style="width:200px;float:left;">
		<div style="margin:10px;">
			<div style="background-image:url([dir]/images/gradient3.png);padding:5px;">
				kalender
			</div>
			<div style="background-color:#AAAAAA;">
				[kalender]
			</div>
		</div>
		
		[template_switch]
	</div>
	<div style="width:200px;float:right;"> 
	</div>
	<div style="margin-left:200px;margin-right:200px;padding:10px;">
		[index]
	</div>
	<div style="clear:both"></div>
</div>

http://www.brainless-gaming.de/v2/

8 Jörg Kruse

ich versteh nur noch nicht ganz wie ich das mit background-position machen soll

Bei "background-position:200px 0px;" sollten die ersten 200 Pixel auf der linken Seite in der Hintergrundfarbe #DCDCDC angezeigt werden - weiter rechts stattdessen die Hintergrundgrafik.

und wie groß das Bild sein soll

1 pixel hoch und so breit wie der Contentbereich

Weil bei repeat ist bei mir alles voll

Ja, das hatte ich noch vergessen - es sollte sich natürlich nur vertikal wiederholen:

background-repeat:repeat-y;

9 NeoMiC (Ex-Mitglied)

<div style="background:#000000 url([dir]/images/background1.png) repeat-y 200px 0px;">

so jetzt klappt alles, ich danke dir :)

... 2 Jahre und 7 Monate später ...

10 keksi (Gast)

Leider helfen diese Hintergrundbildertricks mit den "unechten" Spalten nicht bei einem variablen Seitenaufbau über Prozent-Angaben :(

nach oben

Beitrag schreiben (als Gast)

Verwandte Themen
Thema	Autor	Forum	Beiträge	Letzter Beitrag
Anpassung Footer	PKV-Wiki	HTML und CSS	4	03.11.2017 12:03
Seite soll sich in der Breite an die Browserseite anpassen	andehrl	HTML und CSS	6	22.11.2010 19:02

Volle Höhe des Elternelements

Beitrag schreiben (als Gast)

Verwandte Themen