DIV ganz unten "anpinnen"?

Kurikinton

Hallo zusammen,

hab schon in anderen Foren und Communitys gesucht nur keine passende
Antwort gefunden.

Ich würde gern den <div id="footer"> so anpinnen das dieser immer am
unteren Rand (bottom) angepinnt ist. Die einzige Lösung die ich gefunden
habe ist mit position: absolute ...

Da entsteht nur das Problem das die einzelnen <div> sich überlappen. Mit
z-index hab ichs auch schon versucht, dann überlappt halt was anderes.

Kennt jemand sonst eine Lösung wie man einen <div> ganz unten anpinnen
kann? Mit dem header z.B. gehts ja auch, also ganz oben.

jojo87

position: absolute ist schon der richtige Weg
inkl. Hack für den IE < 7

HTML

<!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="en" lang="en">


<head>
	<title>Footer</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 0.16" />
	<style type="text/css" media="all">
		* {
			margin: 0;
			padding: 0;
		}

		html {
			height: 100%;
		}

		body {
			height: 100%;
		}

		#main {
			position: relative;
			width: 100%;
			min-height: 100%;
		}

		#head {
			height: 150px;
			background: red;
		}

		#menu {
			height: 50px;
			margin-top: 15px;
			background: yellow;
		}

		#content {
			margin-top: 15px;
			padding: 0 15px;
			height: 1000px;
		}

		#footer {
			position: absolute;
			width: 100%;
			bottom: 0px;
			margin-top: 15px;
			background: #ccc;
		}

	</style>

	<!--[if lt IE 7]>
		<style type="text/css">
			#main {
				height: 100%;
			}
		</style>
	<![endif]-->		
</head>


<body>
	<div id="main">
		<div id="head">
			<h1>Header</h1>
		</div>

		<div id="menu">
			<h2>Menu</h2>
		</div>

		<div id="content">
			<h2>Content</h2>
			<p>Lorem Ipsum</p>
			<p>Lorem Ipsum</p>
			<p>Lorem Ipsum</p>

		</div>

		<div id="footer">
			<h3>Footer</h3>
		</div>
	</div>
</body>
</html>

Alles anzeigen

Wenn du davon was nicht verstehst => nachfragen.

Gruß,
jojo

sejuma

Vielleicht ist auch das eine Lösung.

jojo87

Zitat von sejuma

Vielleicht ist auch das eine Lösung.

Quasi dasselbe Prinzip
Durch das

Code

height: auto !imprtant;

kann man sich halt den CC sparen, womits allerdings ne bessere Lösung ist als meine

Grüße,
jojo

Allpa

Hallo zusammen!
Mich kämpfe mit dem gleiche Problem, mein Footer will einfach nicht nach unten, obwohl ich alle Angaben in dem link befolgt habe!

Könnt ihr mal schaun ob ihr meinen Fehler findet?

Hier meine CSS-Datei:

CSS

* {
margin: 0;
pading: 0;
}
html {
height : 100%;
}
 
body {
background-color : #b3aeab;
font-family : Verdana;
color : #555555;
font-size : 0.8em;
height : 100%;
}
 
#wrapper {
position: relative;
border : 0 ;
width : 1024px;
top : 0px;
margin-left : -512px; 
left : 50%; 
overflow : no;
background-color : #b3aeab;
min-height: 100%;
height: auto !important;
height: 100%;
}
 
#start { 
position : absolute; 
border : 0; 
left : 0px; 
top : 506px; 
width : 1024px; 
overflow : no;
background-image : url(dateien/design/start.jpg); 
background-color : #ffffff; 
padding: 0em 0em 2.5em 0em;
} 
 
#header { 
position : absolute; 
border : 0; 
left : 22px; 
top : 0px; 
width : 980px; 
height : 110px; 
background-image : url(dateien/design/header.jpg); 
background-color : #ffffff; 
} 
 
#links { 
position : absolute; 
border : 0; 
left : 0px; 
top : 0px; 
width : 22px; 
height : 506px; 
background-image : url(dateien/design/links.jpg); 
background-color : #b2adaa; 
} 
 
#rechts { 
position : absolute; 
border : 0; 
left : 1002px; 
top : 0px; 
width : 22px; 
height : 506px; 
background-image : url(dateien/design/rechts.jpg); 
background-color : #b2adaa; 
} 
 
#bild { 
position : absolute; 
border : 0; 
left : 22px; 
top : 126px; 
width : 980px; 
height : 380px; 
background-image : url(dateien/design/bild7.jpg); 
background-color : #ffffff; 
} 
 
#balken { 
position : absolute; 
border : 0; 
left : 22px; 
top : 110px; 
width : 980px; 
height : 16px; 
background-image : url(dateien/design/balken.jpg); 
background-color : #ffffff; 
 
#footer { 
position : absolute; 
border : 0px; 
left: 0px;
bottom : 0; 
width : 1024px; 
margin-top: 15px;
background-image : url(dateien/design/start.jpg); 
background-color : #ffffff;

Alles anzeigen

und meine HTML Datei:

HTML

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]"> -->
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
 
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta name="description" content="stage-technics Homepage" />
<meta name="author" content="Patrick Allinger" />
<meta name="date" content="2009-05-10" scheme="DCTERMS.W3CDTF" />
<meta name="language" content="de" scheme="DCTERMS.RFC3066" />
<meta name="rights" content="Alle Rechte liegen beim Autor" />
<meta name="robots" content="index, follow" />
<meta http-equiv="content-type" content="text/css; charset=ISO-8859-1" />
 
<title>stage-technics</title>
 
</head>
<body>
 
<div id="wrapper">
<div id="links"></div>
<div id="rechts"></div>
<div id="header"></div>
<div id="balken"></div>
<div id="bild"></div>
<div id="start">
<br>
Test Test Test Test Test
</div>
<div id="footer">Footer Test</div>
</div>
 
</body>
</html>

Alles anzeigen

Schonmal vielen Dank!

sejuma

Das Problem liegt vermutlich daran, dass du auch noch diese Elemente absolut positioniert hast:

Code

<div id="links"></div>
<div id="rechts"></div>
<div id="header"></div>
<div id="balken"></div>
<div id="bild"></div>
<div id="start">

Damit erhält der #footer einen anderen Bezugspunkt.
Lass mal bei den genannten Div's die absoluten Positionierungen weg. Du kannst sie ebenso mit float und margin-Angaben an die richtige Stelle setzen.

Allpa

Bringt leider nichts!
Auch das Hintergrundbild es Footers wird nicht angezeigt

sejuma

Dann wäre es nicht schlecht, wenn du mal einen Link zur Seite posten könntest.

Allpa

http://www.stage-technics.de/
http://www.stage-technics.de/test/stylesheet.css

sejuma

Bei #balken fehlt im CSS die schließende Klammer.
Dann müsstest du nochmal die margins/paddings überprüfen.

Horizontal zentrieren (z.B. #wrapper) mach besser so: http://www.ohne-css.gehts-gar.net/0001.php

Allpa

Schonmal vielen Dank!
Jetzt wird der Footer korrekt am unteren Rand angezeigt,
allerdings bekom ich es nicht hin, dass mein Hauptfenster (#start) nun auch genau bis zum Footer geht...
Kann ich das irgendwie mit fload lösen, oder wie geht das am besten?

Im Prinzip soll die Seite immer so lange sein wie der Inhalt, aber auf jeden Fall immer die ganze Seite ausfüllen.

thilda

Ich darf mal ganz kurz einwerfen das das hier so nicht stimmt.

Code

overflow: no;

Und Breitenangaben von 1024px... naja, ich würde es nicht machen.

Tags