Prilepte si pätu na spodok stránky

Prilepte si pätu na spodok stránky

V tomto návode vysvetlíme, ako pripevniť pätu na spodok stránky pri krátkych textoch. Pomocou tohto triku zabezpečíme, aby bola pri krátkych textoch päta vždy na spodku okna prehliadača a pri dlhých textoch automaticky posunutá až za obsah stránky. Tento spôsob je vhodný najmä pre stránky s obmedzeným množstvom obsahu na niektorých podstránkach. Veľkou výhodou tohto kódu je fakt, že funguje identicky vo všetkých hlavných prehliadačoch ako Internet Explorer, Mozilla Firefox, Opera, Safari a ďalších.

Princíp fungovania takto navrhnutej stránky si môžete pozrieť TU.

Dôležitá je správna HTML štruktúra

Ako nazvete jednotlivé bloky je na vás. Dôležité je vytvorenie vhodnej HTML štruktúry, ktorá vyzerá nasledovne:

<html>	
   <body>
      <div id="wrapper">
         <div id="header"></div>
         <div id="content"></div>
         <div id="force"></div>
      </div>
      <div id="footer"></div>
   </body>
</html>

Dôležité divy sú: #wrapper, #force a #footer.

Div #wrapper slúži na obalenie celého obsahu stránky okrem päty. Teda všetok obsah stránky okrem päty treba dať práve do tohto kontajnera.

Div #force slúži na zatlačenie päty na spodok stránky. Musí byť umiestnený vždy na konci #wrapper divu a nesmie v ňom byť žiadny obsah.

A ako posledné do HTML štruktúry pridáme div #footer. Tento div nesmie byť v dive #wrapper. Musí byť osadený samostatne.

K tomu trochu CSS

Divu #wrapper nastavíme minimálnu výšku na 100 % z elementu body. Tomu nastavíme výšku 100 % z elementu html. A ten zas má nastavenú výšku 100 % z viditeľnej výšky okna. Div #wrapper bude mať teda minimálne takú istú výšku ako je okno, a maximálne neobmedzenú, teda prispôsobenú podľa množstva obsahu.

Zároveň divu #wrapper nastavíme zápornú veľkosť spodného marginu. Záporná hodnota marginu musí byť rovnaká ako výška divov #footer a #force. Táto negatívna hodnota sa vždy musí rovnať celej výške päty, teda vrátane jej paddingov a borderov.

Práve záporná hodnota spodného marginu teda vytvorí priestor, v ktorom sa zobrazuje päta.

* {
   margin: 0; /*nastavenie marginu okna a všetkých elementov na 0*/
}
html, body {
   height: 100%; /*nastavenie výšky stránky na 100 % výšky okna*/
}
#wrapper {
   min-height: 100%;
   _height: 100%; /*pre IE6 a nižšie*/
  margin: 0 auto -150px; /*musí byť rovnaká ako výška #footer a #force*/
}
#header {
   height: 100px; /*ľubovoľná výška záhlavia*/
   background-color: #c6d9b9;
}
#footer, #force {
   height: 150px;
   clear: both; /*pri viacstĺpcovom rozložení stránky*/
}
#footer {
   background-color: #c6d9b9;
}

Najprv zrušíme margin celému oknu a vzápätí nastavíme výšku na 100 %.

Potom nastavíme divu #wrapper minimálnu výšku – min-height: 100% a záporný margin – ten vytvára miesto pre pätu. IE6 atribút „min-height“ nepozná, preto sme použili hack _height: 100%.

Ďalej nastavíme divom #footer a #force výšku v hodnote záporného marginu divu #wrapper, doplníme atribút clear: both a náš trik je dokončený :).

Demo si môžete pozrieť TU.

Záver

Týmto trikom dokážeme ustrážiť pekný, prehľadný a vyvážený dizajn aj na malých stránkach, ktoré majú len obmedzené množstvo obsahu na niektorých podstránkach, no dá sa použiť aj pri blogoch, portáloch, portfóliách a iných typoch webstránok.

Pozrite si tiež:

CSS sticky footer, Ryan Fait
How to keep footers at the bottom of the page
, Matthew James Taylor
And STAY Down! How To Keep Your Footer At The Bottom Of The Page With CSS
, css reset
How to Stick a Footer to the Bottom with CSS
, Conor Darcy

Skôr ako začneme: nahliadnite do spracovania vašich osobných údajov

Súbory cookies používame najmä na anonymnú analýzu návštevnosti a vylepšovanie našich web stránok. Ak si nastavíte blokovanie zápisu cookies do vášho prehliadača, je možné, že web sa spomalí a niektoré jeho časti nemusia fungovať úplne korektne. Viac info k spracúvaniu cookies.