Sticky Footer erscheint unter dem Bildschirmrand

shycane · 22. Januar 2014

Hi Leute,

ich habe ein Problem und zwar folgendes, ich habe versucht die Seite "1 Spalten Layout" von hier nach zu bauen
und dabei probiert die Aufgabe mit dem "Footer" selbst lösen probiert.

Soweit lief alles gut jedoch wird mit der Footer nicht am Ende der Seite angezeigt sondern noch weiter unten.
Sprich ich musst erst hinunter scrollen bevor ich den Footer sehe anstatt ihn am ende des Bildschirms.

Hier mein Quellcode:

HTML

<!DOCTYPE html><html lang="de">
<head>
<title>Page</title>
<meta charset="UTF-8">
<style type="text/css"><!--
html, body {	height: 100%;	font: 100% Arial, helvetica, sans-serif;}




#kopf {background:url(logo.jpg) no-repeat top left;	height: 150px;}




#kopf p {	color: white;	text-align: right;	font-size: 15pt;	padding: 0.4em 0.4em 0 0;}
#navi {	background-color: #B5DAF9;	padding-left: 1em;}
#schatten {	background:url(schatten.png) repeat-x;	height: 12px;}
#schatten1 {	background:url(schatten.png) repeat-x;	height: 12px;}
#inhalt {	padding-left: 2em;	padding-bottom: 2em;}
* {	margin: 0;	padding: 0;}
#inhalt h1, h2, h3, p, ul {  padding-bottom:.7em;}
#inhalt ul {  padding-left:2em;}
#footer {	background-color: #B5DAF9;	padding-left: 1em;	position:absolute; bottom: 0px; width: 100%;	height: 2em;	line-height: 2em;}
#seite {	position: relative;  min-height: 100%;  width: 100%;  margin: 0 auto;}




--></style></head>
<body>
<div id="kopf"><p>Dies wird mein Kopfbereich</p></div>
<div id="navi">Hier kommt die Navigation hin</div>
<div id="schatten"></div>
<div id="seite">	<div id="inhalt">		<h1>Willkommen zur Beispielwebsite</h1>
			<p>Diese Website gliedert sich in 4 Bereich</p>
				<ul> 					 <li>Kopfzeile: <a href="../bilder/hg-saeulen-img-9599.jpg">Hintergrundbild-Download</a></li> 					 <li>Zeile Steuerung: Hintergrundfarbe ist #ceb98e</li> 					 <li>&Uuml;bergang mit Schattenwurf: <a href="../bilder/schattenwurf-grau-v.png">Download Schattenwurf</a></li> 					 <li>Inhaltsbereich</li>				</ul>
<p>Um die verschiedenen Bereich beim Entwickeln am besten Rahmen ziehen, damit sofort erkennbar ist, wo welcher DIV sitzt :)</p>
<p>zur&uuml;ck zum <a href="http://www.html-seminar.de/pro_css.htm">HTML-Seminar</a></p></div>
<div id="footer">copyright by shycane</div></div><div id="schatten1"></div>
</body>
</html>

Alles anzeigen

Ich hoffe ihr könnt mir helfen und mir meinen Fehler aufzeigen.

LG

shycane

The Scout · 23. Januar 2014

Ich wuerde sagen, es liegt an diesem CSS Schnipsel:

CSS

#footer{
    position:absolute;
    width: 100%
    bottom: 0px;
    height: 2em;
}

Bei position: absolute; gehst du von dem letzten Objekt aus, welches nicht die Standardposition hat. Um vom Fenster auszugehen brauchst du position: fixed;
Am besten dann auch noch einen z-index mitgeben, damit der Footer wirklich ueber allem liegt. Saehe dann ungefaher so aus:

CSS

#footer{
    position:fixed;
    bottom: 0px;
    width:100%
    height: 2em;
    z-index:5; //Nur als Beispiel, geht alles ueber 1
    // Andere Styleeinstellungen
}

shycane · 23. Januar 2014

Hallo,

erstmal danke ja sieht so aus als ob dies das problem lösen würde.
Jedoch immer noch unverständlich für mich da im Tutorial von "Html - Semniar" ebenso "position: absolute;" verwendet wird.

Link dazu:
http://www.html-seminar.de/sti…fussleiste-ganz-unten.htm

Greetz

shy

The Scout · 23. Januar 2014

Dann wuerde ich dir empfehlen, dir das Tutorial noch mal anzuschauen Zitat aus dem Einleitungsparagraphen (fett):

Zitat

[...]Benötigt der Inhalt wenig Platz, wird der Fußbereich unten angezeigt. Benötigt der Inhalt der Website mehr Platz als der Bildschirm lang ist, kommt der Fußbereich nach dem Inhalt (nicht mehr sichbar).[...]

Also hast du schon alles richtig gemacht.
Willst du allerdings, dass der Footer wirklich IMMER sichtbar ist und der Inhalt dahinter scrollt, brauchst du meine Loesung

PS: Axel, der Text in der Klammer... "siechen" schreibt man mit ih eh Der Fussbereich ware nicht mehr "siechbar", der ist schon weggesiecht

Sticky Footer erscheint unter dem Bildschirmrand

Jetzt mitmachen!

Teilen