Footer immer unten anzeigen

Kategorie: WordPress-Tipps | Share: funkygog       

Gesucht wurde eine Möglichkeit den Footer immer unten stehen zu haben, auch wenn der Beitrag nur wenig Platz einnimmt. Aber der Footer sollte nicht unten fixiert sein. Er soll bei längeren Beiträge mitscrollen.

Die Umsetzung in ein WordPress Theme erwiess sich als recht fummelig. Irgendwann hat es dann geklappt. So sieht der derzeitige Aufbau aus:

Die Struktur:

  • html Meta-Angaben, Script-Aufrufe u.a.
    • Body Anfang <body>
      • NonFooter Anfang
        <div id="nonFooter">
        • Header-Bereich
          <div id="header">...</div>
        • Wrapper-Anfang
          <div id="wrapper">
          • Content-Bereich
            <div id="content">..</div>
          • Sidebar
            <div id="sidebar">..</div>

          /Wrapper Ende </div>

        /NonFooter Ende </div>

      • Footer-Bereich
        <div id="footer">...</div>

      /Body Ende </body>

    /html Ende /html

Die Styling-Angaben (css) hierzu:
(ohne schmückendes Beiwerk)

* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
margin:0;
padding:0;
}
#nonFooter {
position: relative;
min-height: 100%;
margin: 0 auto -126px; //Höhe des Footers als negativer margin-Wert
}
#header {
width: 100%;
height: 137px;
}
#wrapper {
margin:auto;
width: 100%;
overflow:auto;
padding-bottom:126px; //Höhe des Footers als padding-Wert
}
#footer {
clear:both;
width: 100%;
height: 126px;
position: relative;
}

weitere interessante Beiträge zum Thema:




Einen Kommentar hinterlassen

*=erforderliche Angaben

Innerhalb der Kategorie: WordPress-Tipps