Sticky Footer Problem

brainspace · #1 (**permalink**) 17.11.2010, 17:49

Hi,

ich versuche verzweifelt einen Sticky Footer zu bauen.

Habe den Aufbau von New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer verwendet, aber es will trotzdem nicht.

Meine HTML:

HTML-Code:

<!DOCTYPE html>
<html lang="de">

	<head>
			<meta charset="utf-8">
			<link rel="shortcut icon" href="/favicon.ico">
			<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
			<link rel="stylesheet" href="style 2.css">
			<title>Psyrup - Home</title>
			<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
			<![endif]-->
			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
			
	</head>

<body>

<div id="wrap">
	<div id="main" class="clearfix">
	Content
	</div>
</div>
<footer>
	Inhalt
</footer>
</body>
</html>

Und die CSS:

Code:

html, body, #wrap {height: 100%;}

body > #wrap {
    height: auto;
    min-height: 100%;
}

#main {padding-bottom: 10px;}  /* Muss genau so hoch sein wie der Footer */

#footer {
    position: relative;
	margin-top: -10px; /* Negativer Wert der Footer-Höhe */
	height: 10px;
	clear:both;
}

.clearfix:after {
    content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display: inline-block;}

Das Problem ist, dass ein Scrollbalken am fenster angezeigt wird (vertikal). Um den Footer zu sehen muss ich dann erst nach unten scrollen, egal wie groß das Fenster ist (Safari)

Ein kleiner Tipp würde mir sehr helfen.

Grüße

ArcVieh · #2 (**permalink**) 17.11.2010, 18:25

Ich weiß nicht, ob der Gebrauch von HTML5 schon Sinn macht...
Aber Du sprichst "footer" falsch an.

brainspace · #3 (**permalink**) 17.11.2010, 18:27

Habs gerade selbst gelöst:

der CSS-Code ist so besser:

Code:

html, body {height: 100%;}

#wrap {
	min-height: 100%;}

#main {
	overflow:auto;
	padding-bottom: 20px;}  /* must be same height as the footer */

footer {
	text-align: right;
	position: relative;
	margin-top: -20px; /* negative value of footer height */
	padding-right: 20px;
	height: 20px;
	clear:both;} 

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

HTML5 geht in dem Fall auch problemlos

Manfred62 · #4 (**permalink**) 17.11.2010, 18:30

Code:

href="style 2.css"

Hast du da ein Leerzeichen drin??

Gruß Manfred

ArcVieh · #5 (**permalink**) 17.11.2010, 18:37

Zitat:

Zitat von brainspace

der CSS-Code ist so besser

Etwas, ja.

Zitat:

Zitat von brainspace

HTML5 geht in dem Fall auch problemlos

Bei mir in FF und Opera funktioniert dein Code nicht -- die -20px werden nicht korrekt angewendet.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Sticky Footer - Ohhh mann	winti	CSS	4	07.10.2010 22:38
Problem mit bild und footer!	Pumpkin	CSS	0	01.11.2008 22:21
Dynamischer Footer - Problem beim IE6	iweim	CSS	0	23.02.2008 12:09
Footer Problem	Xevi	CSS	12	17.02.2008 14:48
(Footer) Problem mit IE7	Nightuser	CSS	5	17.05.2007 16:32