Patička vždy dole pomocí CSS

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:

  1. nastavíme výšku prvků html a body na 100 % (nestačí nastavit pouze jeden, musíme nastavit výšku u obou dvou!)
    html, body {height: 100%;}
    
  2. 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%;}
    
  3. ř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.

  4. zbývá poslední krok, nastavit výšku samotné patičky div #paticka a 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).

Vyvěšeno v Tvorba webových stránek a oštítkováno , , . Přidat si do záložek permalink. Přidat komentář nebo zanechat trackback: trackback URL.

Komentářů: 13

  1. Michal Z.
    Zveřejněno 17.6.2011 v 11:18 | Permalink

    Skvělé řešení!

    diky Michal

    • NET-VOR
      Zveřejněno 17.6.2011 v 12:06 | Permalink

      není vůbec za co, zas taková věda to není :-)

  2. MrDeesh
    Zveřejněno 4.8.2011 v 14:06 | Permalink

    Díky moc, todle se hodí. Já to naposled řešil přes jQuery :D

    • NET-VOR
      Zveřejněno 4.8.2011 v 14:33 | Permalink

      jQuery? proč to dělat jednoduše, když to jde složitě, že :-) )

  3. Tomas
    Zveřejněno 10.11.2011 v 09:10 | Permalink

    Musí tam být ten padding a margin?

  4. Dejv
    Zveřejněno 25.1.2012 v 21:17 | Permalink

    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.) :-/

    • NET-VOR
      Zveřejněno 26.1.2012 v 09:07 | Permalink

      zkus do #obsah dát ještě jeden vnořený div, aby „roztahoval“ rodiče

  5. Joh
    Zveřejněno 20.1.2013 v 10:51 | Permalink

    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

  6. Milan
    Zveřejněno 10.3.2013 v 02:34 | Permalink

    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.

  7. gordon
    Zveřejněno 13.3.2013 v 17:29 | Permalink

    Skvely navod, ale mozem sa spytat, preco nefunguje, ked fam hlavicku este pred div kontainer?

  8. Ladiczek
    Zveřejněno 3.4.2013 v 00:29 | Permalink

    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á.

  9. Ladiczek
    Zveřejněno 3.4.2013 v 00:45 | Permalink

    Tak ne, pardon, beru zpět… chybička byla u mne.

Přidat komentář

Váš email nebude nikdy zveřejněn. Povinná pole jsou označena *

*
*

Můžete použít HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>