Velmi jednoduchý a užitečný trik, jak mít patičku vždy dole na konci stránky. Samozřejmě validně, bez jakýchkoli hacků a podobných prasáren.
Předpokládejme strukturu webu, která je jednoduchá, a proto nejlépe použitelná a nejvíce účinná:
<div id="kontejner">
<div id="hlavicka">
toto je hlavička
</div>
<div id="obsah">
toto je obsahová část
</div>
</div>
<div id="paticka">
toto je patička, která bude implicitně vždy dole
</div>
Samozřejmě není problém do obsahové části přidávat další věci – sloupce, menu ad. Důležité ovšem je, aby patička byla mimo celý kontejner. Jak udělat, aby byla patička vždy dole? Step by step:
- nastavíme výšku prvků
htmlabodyna 100 % (nestačí nastavit pouze jeden, musíme nastavit výšku u obou dvou!)html, body {height: 100%;} - nastavíme minimální výšku pro
div #kontejner. Tím dosáhneme toho, že zatlačíme patičku dolů, i když délka stránky bude např. na půl obrazovky.#kontejner {min-height: 100%;} - řekněme, že patička bude mít výšku např. 100 px, uděláme proto místo pro patičku v obsahové části
div #obsah#obsah {padding-bottom: 100px;}Je samozřejmě možné dát tam více vzduchu (např. padding 200 px), aby to na sobě nebylo nalepené, ale to už je na každém, jak se rozhodne.
- zbývá poslední krok, nastavit výšku samotné patičky
div #patickaa posunout ji tam, kde jsme si na ni před chvílí udělali místo:#paticka {height: 100px; margin-top: -100px;}Z logiky věci vyplývá, že hodnoty pro výšku a margin-top by si měly odpovídat (v absolutní hodnotě, samozřejmě).
Celé dohromady to pak vypadá asi takto:
html, body {height: 100%;}
#kontejner {min-height: 100%;}
#obsah {padding-bottom: 100px;}
#paticka {height: 100px; margin-top: -100px;}
<div id="kontejner">
<div id="hlavicka">
toto je hlavička
</div>
<div id="obsah">
toto je obsahová část
</div>
</div>
<div id="paticka">
toto je patička, která bude implicitně vždy dole
</div>
Příklad patičky vždy dole by měl fungovat ve všech moderních prohlížečích (nepočítám samozřejmě zmetky typu IE 6, které navíc ani netuší o atributech min-height, nicméně prostě je už konečně třeba začít tyhle nedodělky mýtit z povrchu zemského).
Příklad patičky vždy dole
K dispozici máte také funkční příklad patičky vždy dole (patička je vždy dole, i když je celá stránka krátká), včetně příkladu s dlouhým textem (patička se automaticky odsune nakonec).
Komentářů: 13
Skvělé řešení!
diky Michal
není vůbec za co, zas taková věda to není
Díky moc, todle se hodí. Já to naposled řešil přes jQuery
jQuery? proč to dělat jednoduše, když to jde složitě, že
)
Musí tam být ten padding a margin?
Zdar, tahle metoda mi bohužel nefunguje při měnění výšky divu s obsahem stránky po načtení (např. dočítání dat ajaxem, atd.) :-/
zkus do #obsah dát ještě jeden vnořený div, aby „roztahoval“ rodiče
Děkuji za krásné řešení.
Ještě bych ale rád vyřešil jednu drobnost – když si otevřu příklad s krátkým textem (http://blok.net-vor.cz/priklady/paticka-vzdy-dole/index.html) a poté přepnu na příklad s dlouhým textem (http://blok.net-vor.cz/priklady/paticka-vzdy-dole/index-s-textem.html), stránka z důvodu objevení se rolování „odskočí“ o kousek doleva. Napadá mě řešení pomocí PHP, ale neexistuje i něco jednoduššího? Elegantnějšího?
Děkuji
To je přirozené chování, protože vzhledem k délce (resp. výšce) stránky přibude v prohlížeči posouvací lišta, která zmenší zobrazovací prostor o svoji šířku. Řešit se to asi dá (některá řešení např. http://stackoverflow.com/questions/4998291/body-with-overflowscroll-not-behaving-as-expected ), ale nevidím v ‘znásilňování’ přirozeného chování prohlížeče moc smysl.
Zdravím. Řešení je to vskutku elegantní a jednoduché, nicméně v prohlížeči Google Chrome se pod patičku přidá bílý proužek a u krátkého se přidá i posuvník stránky právě o ten přidaný proužek.
Skvely navod, ale mozem sa spytat, preco nefunguje, ked fam hlavicku este pred div kontainer?
Je to super řešení, jen mi nefunguje správně pozadí, pokud je tag HTML a BODY nastaven na height: 100%, po opravě na min-height: 100% vše funguje jak má.
Tak ne, pardon, beru zpět… chybička byla u mne.