Sticky Footer

pusher23 · 09.04.2014

Hallo Gemeinde,

ich habe folgendes Anliegen:
Ich benötige einen wrapper welcher sich je nach Inhalt nach unten ausdehnt.

Unten einen sticky footer welcher immer am unteren Rand der Seite klebt.
Egal wieviel Inhalte im wrapper drin sind und welche Bildschirm-Auflösung man benutzt.

Der wrapper muss allerdings über den footer drüberstehen, der footer beinhaltet später lediglich ein Hintergrundbild welches vom wrapper dann überdeckt wird.

HTML:

<body>
<div id="wrapper">
    <div id="top">Bereich top</div>
    <div id="content">
        <h1>Überschrift</h1>
        <br />
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
        duo dolores et ea rebum.<br />
        <br />
        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
        sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
        aliquyam erat, sed diam voluptua.<br />
        <br />
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
        est Lorem ipsum dolor sit amet.<br />
        <br />
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
        duo dolores et ea rebum.<br />
        <br />
        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
        sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
        aliquyam erat, sed diam voluptua.<br />
        <br />
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
        est Lorem ipsum dolor sit amet.<br />
        <br />
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
        duo dolores et ea rebum.<br />
        <br />
        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
        sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
        aliquyam erat, sed diam voluptua.<br />
        <br />
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
        est Lorem ipsum dolor sit amet.<br />
        <br />
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
        duo dolores et ea rebum.<br />
        <br />
        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
        sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
        aliquyam erat, sed diam voluptua.<br />
        <br />
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
        est Lorem ipsum dolor sit amet.<br />
        <br />
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
        duo dolores et ea rebum.<br />
        <br />
        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
        sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
        aliquyam erat, sed diam voluptua.<br />
        <br />
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
        est Lorem ipsum dolor sit amet.<br />
        <br />
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
        duo dolores et ea rebum.<br />
        <br />
        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
        sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
        aliquyam erat, sed diam voluptua.<br />
        <br />
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
        est Lorem ipsum dolor sit amet.<br />
        <br />
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
        duo dolores et ea rebum.<br />
        <br />
        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
        sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
        aliquyam erat, sed diam voluptua.<br />
        <br />
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
        est Lorem ipsum dolor sit amet.<br />
        <br />
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
        duo dolores et ea rebum.<br />
        <br />
        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
        sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
        aliquyam erat, sed diam voluptua.<br />
        <br />
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
        est Lorem ipsum dolor sit amet.<br />
        <br />
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
        duo dolores et ea rebum.<br />
        <br />
        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
        sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
        aliquyam erat, sed diam voluptua.<br />
        <br />
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
        est Lorem ipsum dolor sit amet.<br />
        <br />
    </div>
</div>
<div id="sticky-footer"></div>
</body>

Code:

@charset "utf-8";
/* CSS Document */

*
{
    margin:0px;
    padding:0px;
    border:0px;
}
html, body
{
    width:100%;
    height:100%;
    font-family:Verdana, Arial;
    font-size:12px;
}
#wrapper
{
    width:960px;
    min-height:100%;
    height:auto !important;
    height:100%;
    position:relative;
    left:50%;
    margin-left:-480px;
    z-index:10;
    background-color:#000;
    color:#FFF;
}
#top
{
    width:960px;
    height:250px;
    float:left;
    background-color:#F00;
    font-size:36px;
}
#content
{
    width:860px;
    height:auto;
    float:left;
    padding:30px 50px 30px 50px;
    color:#FFF;
}
#sticky-footer
{
    width:100%;
    height:374px;
    background-color:#096;
    z-index:1;
    position:relative;
    top:-374px;
}

Problem a) Bei mehr Inhalt wird der wrapper beschnitten sobald die 100% Höhe erreicht sind
Problem b) Der Footer bleibt beim scrollen an der Ausgansposition, sprich wenn gescrollt wird klebt er nicht weiter am unteren Rand sondern bleibt wo er ist. Kommt auf die Bildschirmauflösung an, bei meinen 1050px ist das Problem deutlich erkennbar.

PS: Kommt der Text direkt in den wrapper, lösen sich die Probleme auf. Warum konnte ich leider noch nicht rausfinden.

Vielen Dank für jegliche Antwort!

der-tim · 09.04.2014

Hallo,

folgende zwei Änderungen im CSS sollten helfen:

Code:

#wrapper {
    background-color: #000000;
    color: #FFFFFF;
    display: table;
    height: auto !important;
    left: 50%;
    margin-left: -480px;
    min-height: 100%;
    position: relative;
    width: 960px;
    z-index: 10;
}


#sticky-footer {
    background-color: #009966;
    bottom: 0;
    height: 374px;
    position: fixed;
    width: 100%;
    z-index: 1;
}

Beim wrapper bringt es das "display:table;" und den footer "fixed" statt "relative" setzen, damit er an gleicher Stelle (bottom:0) bleibt.

Hoffe, das passt - viel Erfolg!

cebito · 09.04.2014

pusher23 schrieb:
Der wrapper muss allerdings über den footer drüberstehen, der footer beinhaltet später lediglich ein Hintergrundbild welches vom wrapper dann überdeckt wird.

Wieder ein typisches Beispiel, wo Markup für ausschließliche Designzwecke missbraucht wird. Das lässt sich aber auch ohne zusätzliches Markup leicht lösen... http://jsfiddle.net/4yJSd/

afr0kalypse · 10.04.2014

Ich fänds suuuper, wenn mal jemand das Thema "Sticky Footer" als 'sticky' hier im Forum markieren würde

Die Frage kommt in letzter Zeit häufiger

pusher23 · 10.04.2014

@der-tim:
vielen Dank, damit konnten die Probleme gelöst werden!

@cebito:
Bez. Missbrauch hast du natürlich recht. Ich hatte es bereits ähnlich deinem Beispiel versucht (Hintergrundbild dem body mit Ausrichtung "bottom") leider ohne Erfolg.
Aber diese Lösung funktioniert gut und gefällt mir besser als meine mit dem Sticky Footer.

Ich bedanke mich für eure Hilfe!