Můj web

Patička stránky musí být dole!

Publikováno 10.10.2012

Kde jinde by také patička měla být? Nemusí to být ale až tak triviální jak se zdá. Jelikož jde o webovou prezentaci bude článek o tom, jak posadit blok pomocí HTML a CSS na spodní okraj webové stránky. V dnešní době mají uživatelé poměrně vysoká rozlišení obrazovky nebo není některá ze stránek prezentace příliš obsáhlá, a tak se stane, že patička, která následuje za textem zůstane viset někde uprostřed stránky. Jak to udělat, aby „spadla dolů“?

Na webu najdete spoustu řešení, jak to komu fungovalo včetně zaručených rad, kterou CSS vlastnost určitě neopomenout. Nejlepší hodnocení mají rady, kde lidé nechtějí mít patičku vždy dole pod textem, ale mít ji na spodním okraji okna prohlížeče a text scrollovat pod ní. Nejprve mi přišlo, že scrollování včetně patičky je mnohem těžší úkol, ale ono je to vlastně totéž.

V principu jde o to, absolutně pozicovat blok vůči nadřazenému bloku na spodní okraj. Pokud je rodičem uzel BODY, tak bude scrollovat text pod patičkou. Pokud je rodičem nějaký vnitřní DIV, tak bude patička scrollovat s tímto DIVem. Jak to tedy je konkrétně? CSS vlastnosti jsou pro přehlednost zapsány přímo do HTML souboru:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<body style="height: 100%; margin: 0; padding: 0;">
  <div id="main"
    style="position: relative; min-height: 100%; width: 200px; background: silver;">
    <div id="inner"
      style="padding-bottom: 100px; background: gray;">
    </div>
    <div id="bottom"
      style="position: absolute; left: 0; bottom: 0; height: 100px; width: 100%;
             background: black;">
    </div>
  </div>
</body>
</html>

A teď si to projdeme. Jelikož jsme definovali DOCTYPE, je nutné nastavit celému HTML stromu výšku 100%, aby se měl čím řídit uzel BODY – ten má také výšku 100%. Blok mainminimální výšku 100% – kdyby měl celkovou, tak by nám v případě delšího textu než je výška okna prohlížeče zůstala patička viset ve vzduchu. A naše patička – blok bottom – má výšku dle potřeby, např. 100px.

Aby patička zůstala na spodním okraji bloku main, musí být absolutně pozicovaná do levého dolního rohu tohoto bloku. Absolutní pozicování funguje jen pokud má rodič jiné pozicování než static, takže je nutné zadat position: relative; pro blok main.

Nad patičkou bude v hlavním bloku blok inner s vlastním obsahem stránky. Ten se natahuje automaticky podle délky obsahu. Jen musíme zajistit, aby nám ho nepřekryla patička, která následuje za ním, takže mu dáme dolní okraj stejně vysoký jako je výška patičky.

A to je vlastně vše. Ostatní uvedené CSS vlastnosti jako šířka bloku nebo barva pozadí jsou jen pro ilustraci, aby jsme výsledek lépe viděli. Pokud potřebujete mít i záhlaví stránky, lze postupovat obdobně – blok top dáte před inner a nezapomenete na horní okraj bloku inner.

A na závěr pro někoho možná špatná zpráva – jelikož je použita vlastnost min-height, tak uvedené řešení nefunguje v prohlížeči IE6. Jinak by neměl být problém.

Komentáře

Komentáře jsou vypnuty.