Patička vždy dole v šabloně ONE

Často se stává, že vlastní obsah stránky je příliš krátký a patička stránky, která se zobrazuje standardně hned pod obsahem, se zobrazí někde uprostřed stránky. Ne vždy jsme spokojeni s tímto vzhledem, proto vám v tomto návodu poradíme, jak pozici patičky na šabloně ONE změnit, aby se zobrazovala až za obsahem a zároveň vždy při spodním okraji okna prohlížeče.

Vlastní CSS styl

Šablona ONE je vytvořena tak, že nabízí velké možnosti stylování. Stačí tedy pouze dopsat do vlastního CSS stylu následující kód, který doporučujeme umístit až na konec vlastního stylopisu:

/*------------ patička vždy dole -----------------*/

html {
 height: 100%;
}
body {
 position: relative;
 padding-bottom: 6rem;
 min-height: 100%;
}
#content {
 margin: 0 auto 170px;        /* hodnotu 170px může být potřeba změnit v závislosti na výšce patičky */
}
#box-custom-footer {
 position: absolute;
 right: 0;
 bottom: 0;
 left: 0;
 padding: 0;
 margin: 0 auto 50px;         /* 50px je výška prvku bar-poweredby */
}
#bar-poweredby {              /* jde o prvek s inPage nadpisem, který se nachází pod patičkou */
 position: absolute;
 right: 0;
 bottom: 0px;
 left: 0;
}

/*----------// konec patičky vždy dole ------------*/ 

Uvedený zápis je pro výchozí stav šablony ONE (původní patičku webu), pokud používáte vlastní patičku, bude potřeba hodnoty upravit.

Zápis vlastního stylu musí být přesně v pořadí, jako je uvedeno výše, jinak výsledek nebude fungovat.

Řešení je převzato z anglického originálu CodePen. 

Responsivní verze

Pro jednotlivé šířky zobrazení je poté třeba upravit margin prvku #content dle výšky patičky v daném zobrazení. K tomu vám pomůže článek Jak upravit responzivní design.