Antworten auf deine Fragen:
Neues Thema erstellen

Sticky Footer

pusher23

Noch nicht viel geschrieben

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

Nicht mehr ganz neu hier

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!
 

afr0kalypse

Allwissendes Karmameerschweinchen!

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

Noch nicht viel geschrieben

@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!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.613
Beiträge
1.538.346
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben