Jak vypadá zdrojový kód
Není nic složitého patičku dole udržet, stačí pouze dodržovat jakousi standardní strukturu základních elementů.<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
A pak přihodit správné kaskádové styly.
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Výška patičky */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
A od teď se patička bude vždy zobrazovat úplně dole.
Jak to funguje
Tagům "body" a "html" se musí výška nastavit na 100% aby byly vždy roztažené minimálně na celou výšku okna prohlížeče a také proto, že v některých starších prohlížečích pak nefunguje atribut "min-height" pokud není zadefinovaná výška rodičovského elementu.
Div který slouží jako kontejner (v našem případě #wrapper) má pak relativní pozici aby se dala vůči němu absolutně napozicovat patička.
Samotná patička je tedy pozicována absolutně ke spodní straně kontejneru a u elementu s obsahem je nastaven spodní padding, který se rovná výšce patičky, jinak by patička překrývala spodní část obsahu, pokud by byl vyšší než dokáže monitor vertikálně zobrazit. Pokud chceme mít obsah od patičky více odsazený, samozřejmě stačí u #content nastavit o něco větší padding-bottom.
