• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

One Page Footer "verstecken"

lorii

Neues Mitglied
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!
 
So vielleicht
Code:
<!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>
 
Zurück
Oben