Div-Layout - Problem mit height: 100%

Status
Nicht offen für weitere Antworten.

benninet

Mitglied
Hallo,

bevor ich das Problem beschreibe erstmal etwas Code vorweg:

HTML:
	<div id="wrapper">
		<div id="header">
			<img src="{path}/images/logo.jpg" alt="header" />
		<div id="sidebar">Test</div>
		<div id="content">
			{content}
		</div>
	</div>

Code:
#wrapper {
	width: 800px;
	margin: auto;
	min-height: 100%;
	height: auto !important; /* auto-height mit !important-Regel für moderne Browser */
	height: 100%;
}

#sidebar {
	width: 147px;
	float: left;
	background-color: grey;
}
#content {  
	padding: 0px 15px 5px 15px;
	margin-left: 155px;
}

Mein Problem:

Ich hätte gerne, das die Sidebar immer [mindestens] die volle verfügbare Höhe hat, nur wie erreiche ich das?
Eine % Angabe bei height hilft da nicht, da sich %-Angaben auf das übergeordnete Element beziehen, ist dieses alleding auch schon in der Höhe dynamisch regt sich garnichts :suspekt:

Hat irgendwer eine Idee wie ich das schaffen könnte?

Danke im Vorraus ;)

P.S.: Hier eine schnelle billige Skizze der Sache für die die sich aus dem Code nichts vostellen können:

billigskizze.jpg
 
Hi,

erzeuge eine Grafik, die den Hintergrund für #sidebar enthält und binde diese in #wrapper als vertikal zu wiederholendes Hintergrundbild ein.

mfg Maik
 
Hab ich getan:

position: absolute;

funktioniert, bis ich soviel inhalt hab das ich scrollen muss

position: relative;

funktioniert, allerding wenn ich weniger inhalt hab is der footer nicht unten :confused:

Code:
#footer { clear: both; position: relative; bottom: 0; }
 
Dann hast du wohl das Elternelement #wrapper nicht relativ positioniert, denn in meinen Tutorial-Beispielen tauchen keine derartige Probleme auf.

Ansonsten zeig mal den aktuellen HTML- und CSS-Code.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück