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> - Content-Bereich
/NonFooter Ende
</div> - Header-Bereich
- Footer-Bereich
<div id="footer">...</div>
/Body Ende
</body> - NonFooter Anfang
/html Ende
/html - Body Anfang
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:
- Einmal Erdgeschoss bitte!
- Footer-Sticky-Alt
- Using Sticky Footer
Noch kein Kommentar, Füge deine Stimme unten hinzu!