One Page Footer "verstecken"

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich konnte zu folgender Frage keine hilfreiche Seite auf Google finden und wende mich deswegen an euch. Ich arbeite gerade an einer One Page Seite und möchte, dass der Footer sozusagen erstmal „versteckt“ ist und dann unter der letzten Section hervortritt, eig. genauso wie auf dieser Seite: http://www.agentur-loop.com/
Ich habe es schon mit position: fixed versucht, aber dann verschwindet der Footer komplett. Was anderes fällt mir nicht ein, hat einer von euch vielleicht eine Idee ? Wäre super. Danke schonmal im Voraus!

2

So vielleicht

<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
* {
 margin:0;
 padding:0;
}

html , body {
 height:100%;
 position:relative;
}

#wrapper {
 min-height:100%;
 background:#eee;
 margin-bottom:100px;
}

#head {
 height:100px;
 background:#aaa;
}

#footer {
 background:#444;
 color:#fff;
 position:fixed;
 height:100px;bottom:0;left:0;right:0;z-index:-1;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="head">header</div>
<div id="content">
 <h1>content</h1>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
3

Perfekt, es funktioniert, vielen vielen Dank!