Ergebnis 1 bis 2 von 2

Thema: Problem mit sticky footer (footer wandert nach oben)

  1. #1
    HTML Newbie
    Registriert seit
    10.09.2013
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Problem mit sticky footer (footer wandert nach oben)

    Hallo!
    Mein Problem: Der footer sitzt zwar am unteren Rand. Wenn ich aber das Fenster verkleinere und nach oben schiebe, wandert der footer mit nach oben. WARUM? Ich habe u.a. die äussere "Container-Box" auf position: relative gesetzt und footer position: absolute; bottom: 0.

    Hier mein Code (bitte das Layout nicht weiter beachten!! Die Seite ist nur eine ÜBUNGSSEITE!). Wäre toll, wenn sich jemand den Code ansehen und den Fehler finden könnte! DANKE schon mal!

    <!doctype html>
    <html>
    <head>
    <title>Sticky footer</title>

    <style type="text/css">

    body, html { height: 100%;
    }

    * {margin: 0; padding: 0;}

    #wrapper { position: relative;
    margin: 0 auto;
    min-height: 100%;
    height: 100%; /* Für IE */
    background-color: orange;}

    #header { height: 200px;
    border: 2px solid blue;
    margin-bottom: 20px;
    }

    #content { margin: 0 auto;
    width: 960px;
    /*height: 100%;
    background-color: silver;
    }


    #column1 { border: dotted 3px red;
    background-color: #fff;
    float: left;
    width: 43%;
    padding: 8px;
    }

    #spacer { backrground-color: orange;
    float: left;
    border: 1px solid;
    background-color: orange;
    width: 8%;}

    #column2 { border: dotted 3px green;
    background-color: #fff;
    float: left;
    width: 43%;
    padding: 8px;
    }

    #footer { position: absolute;
    bottom:0;
    background-color: blue;
    width: 100%;
    }

    </style>

    </head>
    <body>
    <div id="wrapper">

    <div id="content">

    <div id="header">

    <p>HEADER</p>

    </div>

    <div id="text">
    <p id="column1">Text paragraph left. Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.</p>
    <div id="spacer">SPACER</div>
    <p id="column2">Text paragraph right.</p>
    </div>


    </div> <!---- End #content ---->

    <div id="footer">

    <p>FOOTER</p>

    </div> <!---- End #footer ---->

    </div> <!---- End #wrapper ---->
    </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

    Standard AW: Problem mit sticky footer (footer wandert nach oben)

    außer dass Du bei #content denKommentar /*height: 100%;nicht geschlossen hast, seh ich keinen Fehler.
    Der footer ist doch immer unten am Seitenende dran, auch wenn der Seiteninhalt theoretisch länger wäre.

    PS: Habe dein Problem gefunden. Beim Scrollen nach unten wandert der footer nach oben.
    Eine mögliche Lösung findest Du hier:
    http://www.cssstickyfooter.com/de/verwendung.html

    LG Matthias

  3. Folgende User finden die Antwort von resteverwerter gut:


Ähnliche Themen

  1. Sticky Footer Problem
    Von xake im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 22.10.2012, 17:12
  2. Problem mit Sticky Footer
    Von Junky5 im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 26.06.2012, 22:11
  3. Sticky Footer will einfach nicht funktionieren!
    Von Penzoil im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 25.11.2011, 22:55
  4. Footer nach unten verdrängen
    Von guuls im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 02.03.2011, 15:07
  5. Problem mit Footer
    Von micronix im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 01.07.2010, 12:50

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •