Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 16.05.2015, 18:59
css-neuling css-neuling ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.05.2015
Beiträge: 2
css-neuling befindet sich auf einem aufstrebenden Ast
Standard Sidebar Höheneinstellung

Hallo!

leider habe ich ein Problem, bei dem ich als CSS-Anfänger an meine Grenzen stoße. Ich hoffe ihr könnt mir helfen.

Mein Problem: Ich möchte eine Webseite erstellen mit Header, Sidebar, Hauptinhalt ( bei mir mainframe) und einem Footer. Die Anordnung der einzelnen Elemente passt auch schon so, wie ich das haben will, jedoch wird meine Sidebar/Mainframe zu lang, sodass die beiden viel zu lang werden und der Footer außerhalb des Fensters landet.
Ich habe schon den ganzen Tag im Internet gesucht, doch irgendwie führte nichts zum gewünschten Ergebnis.

Das Problem habe ich schon erkannt (bei position: relative; height: 100% ist das gewünschte div genau so hoch wie das übergeordnete div.

So ist es gerade:


So soll es werden:


Logischerweise sollen die div's über den unteren Browserrand hinausgehen, sofern der Inhalt es verlangt.

Hier mein html- und CSS-Code:

HTML:
HTML-Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Startseite</title>
</head>
<body>
	<div id="content">
		<div id="header">
			<h1>Startseite</h1>
			<p>Hallo Gast!<p>
		</div>
		
		<div id="holder">	
			<div id="sidebar">
				<p>Hier ist die Sidebar.
			</div>


		<div id="mainframe">
		<p>irgendwas</p>
		</div>

	</div>
		<div id="footer">
		<p>footer
		</div>
		
	</div>
</body>
</html>
CSS:
Code:
body , html{	font-family: Arial;
			text-align: center;
			height: 100%;
}
#content {	text-align: left;
			display: inline-block; 
			height: 100%;
}
#sidebar {	width: 250px;
			border: dotted;
			float: left;
			height: 100%;
}
#mainframe {	border: dotted;
			margin-left: 265px;
			width: 900px;
			height: 100%;
}
#holder {	margin: auto;
			margin-top: 10px;
			margin-bottom: 10px;
}
#header {	height: 150px;
			border: dotted;
			width: 1165px;
}
#footer {	border: dotted;
			margin-top: 5px;
			margin-bottom: 0px;
}
Mit Zitat antworten
Sponsored Links