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