• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Seite in der Hoehe strecken (Browserhoehe anpassen) ?

S

sirbender

New member
Hi,

Ich habe eine Seite mit folgenden CSS Elementen:

wrap (beinhaltet alle anderen divs)

left, center, right
<div style="clear:both;"> </div>
footer

Wie kann ich es schaffen, dass der Mittelteil (die divs: left, center, right) gestreckt werden wenn der wrap insgesamt eine kleinere Hoehe hat als das Browserfenster. Der Footer soll also immer unten am Browserfenster zum liegen kommen (ausser natuerlich der Inhalt der Seite uebersteigt die Browserfenster Hoehe).

Danke!
 
Schau mal, ob Du damit was anfangen kannst:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<title>Footer unten</title>
<style type="text/css">
html, body {
	padding:0;
	margin:0;
	background-color:#eee;
	height:100%;
}
#outer_page {
	width:786px;
	margin:0 auto;
	position:relative;
	min-height:100%;
	height:auto !important;
	height:100%;
}
#inner_page {
	padding:0;
}
#header {
	width:100%;
	height:145px;
	background-color:#000;
	color:#fff;
}
#content {
	position:relative;
	top:10px;
	float:left;
	width:100%;
	margin:0 0 20px;
	color:green;
}
#footer {
	clear:left;
	position:absolute;
	bottom:0;
	width:786px;
	color:black;
	width:100%;
}
</style>
</head>
<body>
<div id="outer_page">
	<div id="inner_page">
		<div id="header">Header</div><!-- #header -->
		<div id="content">Content</div><!-- #content -->
	</div><!-- #inner_page -->
		<div id="footer">Hier ist unten</div><!-- #footer -->
</div><!-- #outer_page -->
</body>
</html>
 
Leider konnte ich es mit deinem Beispiel nicht 100% nachvollziehen. Hier mein unmodifiziertes template ohne content.

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Footer unten</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

#wrap {
	width: 900px;
	margin: 0 auto;
	border-left: 1px solid #aaa;
	border-right: 1px solid #aaa;
	background: #fff;
}

#menu {
	height: 30px;
	line-height: 30px;
	border-top: 1px solid #555;
	border-bottom: 1px solid #555;
	background: white;
}

#left {
	float: left;
	width: 150px;
	padding: 10px;
}

#center {
	margin-top: 10px;
	float: left;
	width: 780px;
	padding: 10px 20px 20px 20px;
}

#right {
	float: right;
	width: 130px;
	padding: 10px;
}

#footer {
	margin-top: 20px;
	border-top: 1px solid #aaa;
	padding: 10px 15px;
	background: #eee;
}
</style>
</head>
<body>
<div id="wrap">
	<div id="header" style="position:relative;">header</div>
	<div id="menu">menu</div>
	<div id="left">left</div>
	<div id="center" style="position:relative;">center</div>
	<div id="right">right</div>
	<div style="clear:both;"> </div>
	<div id="footer">footer</div>
</div>
</body>
</html>
 
Ich habe an drei Stellen im CSS was geändert:
PHP: 
html, body {   /* statt des Universalselektors *  */
	padding: 0;
	margin: 0;
	height: 100%;
}

#wrap {
	width: 900px;
	margin: 0 auto;
	border-left: 1px solid #aaa;
	border-right: 1px solid #aaa;
	background: #fff;
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

#footer {
	margin-top: 20px;
	border-top: 1px solid #aaa;
	padding: 10px 0;
	background: #eee;
	clear:left;
	position: absolute;
	bottom: 0;
	width: 900px;
}

Und das kann aus dem HTML raus:
PHP: 
    <div style="clear:both;"> </div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben