Hintergrundbilder bei CSS-basierten Layouts

Bei den im Modul "CSS-basierte Layouts" vorgestellten Layoutformen werden die verschiedenen Spalten nur genauso "hoch" angezeigt, als Inhalt in der jeweiligen Spalte ist. Solange die Spalten keine oder diesselbe Hintergrundfarbe haben wie der übergeordnete container-div, fällt das optisch nicht weiter auf. Sobald man z.B. der Navigation wie auch dem content andere Hintergrundfarben als dem container-div zuweist, sieht man, dass Navigation nicht bis unten zum footer hin durchgezogen angezeigt wird (Beispiel). Umgekehrt wird bei sehr wenig content und sehr vielen Punkten in der Navigationsliste die Content-Spalte nicht bis zum Footer durchgezogen und endet irgendwo zwischen Header und Footer (Beispiel). Man kann nur rein mit CSS also keine durchgezogene Spalte realisieren, wenn der Inhalt dieser Spalte vertikal eine geringere Ausdehnung hat als eine andere Spalte.

Es gibt zwar die Möglichkeit mit z.B. Javascript die höchste "Spalte" zu ermitteln und alle anderen auf diese Größe anzupassen, aber erstens erfordert dieser Ansatz zusätzliche Programmierung und zweitens muss dazu zwingend Javascript auf der Benutzerseite aktiviert sein, was nicht zwingend vorausgesetzt werden sollte.

Eine weitverbreitete, nur auf CSS basierende, Lösung zu dieser Problematik nennt sich "Faux Columns" (Falsche, vorgespielte, gefälschte Spalten) und wird im Folgenden erklärt.