Benutzer:Camping RIDER/CSS/CSS Sticky Footer

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Auf vielen Webseiten gibt es einen Footer, d.h. einen Bereich, der inhaltlich und optisch den Abschluss der Seite darstellt. Oft ist es dabei wünschenswert, dass dieser Footer-Bereich auch in der Anzeige auf dem Bildschirm ein abschließendes Element darstellt - bei Seiten mit wenig Inhalt und/oder bei Verwendung entsprechend großer Bildschirme werden Footer leider aber oft direkt am Ende des eigentlichen Inhalts angezeigt, auch wenn sich dieses mitten auf dem Bildschirm befindet.

Auch die Fixierung des footers mit position: fixed bringt keine Abhilfe, da der Footer dann zwar am unteren Rand des Bildschirms fixiert werden kann, dafür aber nicht mehr nur nach Ende des Seiteninhalts zu sehen ist und - gerade auf kleinen Bildschirmen - wertvollen Anzeigeplatz dauerhaft belegt. Auch der mögliche Einsatz von JavaScript ist keine optimale Lösung.

Unter anderem um dieser Problemstellung gerecht zu werden, erwägt das W3C mit position: sticky die Einführung einer neuen CSS-Eigenschaft. So lange diese allerdings nicht standardisiert und in den Browsern umgesetzt ist, und um Kompatibilität zu älteren Browserversionen zu gewährleisten, müssen Sie zunächst noch mit anderen Mitteln Abhilfe leisten. Wie Sie trotz aller Widrigkeiten mit den schon vorhandenen Mitteln einen solchen "Sticky Footer" realisieren können, erfahren Sie in diesem Praxistipp.

Das Grundgerüst[Bearbeiten]

Wir wollen für dieses Tutorial die Seitenstruktur benutzen, die schon aus dem Tutorial zur HTML5-Grundstruktur bekannt ist - mit einer Änderung:

HTML5-Seitenstruktur - Elemente für den Inhaltsbereich
<body> <div id="wrap"> <header> <h1>Beispielseite</h1> <p>Wir präsentieren hier einen Sticky Footer.</p> </header> <main> <article> <h1>CSS Sticky Footer</h1> <p>Dies ist meine zweite HTML5-Seite - diesmal mit Sticky-Footer.</p> <!-- Hier folgen weitere Textzeilen etc. --> </article> <aside> <section> <h2>Kontakt</h2> <ul> <li><a href="link_1.html">Wiki</a></li> <li><a href="link_2.html">Blog</a></li> <li><a href="link_3.html">Forum</a></li> </ul> </section> </aside> </main> </div> <footer> <p>Dies ist die Fußzeile. Hier gibts oft Links und Informationen.</p> </footer> </body>
Damit die Positionierung des <footer> ohne größeren Aufwand funktionieren kann, ist es nötig, alle Elemente außer dem <footer> in einen Container <div id="wrap"> einzuschließen.