Wundermittel für CSS

Teil 8: CSS: Profi-Tipps und Tricks - Negative Margins

In einfachen Fällen sind Sie wahrscheinlich mit der Faux-Columns-Methode besser bedient. Wo diese Technik nicht praktikabel ist, ist es aber gut zu wissen, dass es weitere Methoden gibt.

CSS: Profi-Tipps&Tricks

© Archiv

Die Fußzeile befindet sich immer ganz unten im Browserfenster.

Fußzeile immer unten

Auch für eine Fußzeile, die unabhängig von der Länge der Inhalte der Seite immer unten platziert wird, gibt es eine Lösung mit negativen Margins, die von Cameron Adams stammt. Basis ist folgendes HTML-Gerüst:

<div id="container"><div id="inhalt">Inhaltsbereich</div></div><div id="fuss">Fußzeile</div>

Erst einmal muss man dafür sorgen, dass der container unabhängig von den Inhalten immer mindestens 100% hoch ist. Dafür müssen zuerst html und body als Bezugspunkt eine Höhe von 100% erhalten:

html, body {
margin: 0;
padding: 0;
height: 100%;
}

Und der #container erhält die erforderliche Mindesthöhe von 100%.

html, body {
margin: 0;
padding: 0;
height: 100%;
}

Fehlt noch die Angabe für den Internet Explorer, der min-height nicht versteht, er erhält stattdessen eine Höhenangabe für #container von 100%. Hier profitieren wir davon, dass der Internet Explorer 6 Elemente automatisch so ausdehnt, dass die Inhalte darin Platz haben:

* html #container {
height: 100%;
}

Damit füllt #container den ganzen Bildschirm - die Fußzeile würde darunter platziert werden. An dieser Stelle kommen wieder negative Margins ins Spiel: Der Inhaltsbereich erhält ein padding-bottom in der Höhe der Fußzeile. Der Fußzeile selbst weisen Sie die gewünschte Höhe zu und ziehen sie über eine negative Angabe bei margin-top in den sichtbaren Bereich:

#inhalt {
padding-bottom: 2em;
}
#fuss {
position: relative;
margin-top: -2em;
height: 2em;
}

Da der Fußbereich außerhalb des Containers für den Inhalt platziert ist, müssen Sie Breitenangaben, die für die gesamte Seite gelten sollen, dann natürlich ebenfalls für #fuss definieren.

Das gilt genauso für eine eventuelle Zentrierung, die Sie auch für die Fußzeile vornehmen müssen. Diese Layout-Variante basiert darauf, dass Sie wissen, wie hoch die Fußzeile ist. Als Einheit für die Höhenangabe bietet sich em an: So wird die Fußzeile bei vergrößerter Schrift ebenfalls automatisch vergrößert.

Alles in allem kann man sagen, dass es für negative Margins viele und spannende Einsatzmöglichkeiten gibt. Und dabei darf man nicht vergessen: Negative Margins sind keine obskuren Hacks, sondern im CSS-Standard vorgesehen.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".