Stopka zawsze na samym dole strony niezależnie od rozdzielczości z pomocą CSS

Jeśli chcesz żeby stopka strony była zawsze przyklejona do dołu i jesteś jednym z tych, którzy uważają że tabelki są do prezentowania danych a nie tworzenia struktury strony, to pokażę Ci jak to osiągnąć dzięki CSS-owi.

Zasada jest prosta. Dajemy 100% dla strony, body i naszego głównego kontenera. Ustalamy wysokość stopki, a następnie odejmujemy tę wartość od dolnego marginesu naszego głównego kontenera. Trzeba jeszcze dodać jakiś pusty kontener który wypchnie nam zawartość strony na wysokość stopki. Robi się to po to aby w momencie jak wypełnimy stronę treścią, stopka nie nachodziła na nią. W końcu odjeliśmy ten margines więc “weszliśmy” na teren jakiegoś innego kontenera.

To tyle w mowie. W praktyce wygląda to tak.

Tworzymy sobie strukturę dokumentu mniej więcej jak pokazana poniżej:

page content
 

I oczywiście w CSS-ie muszą znaleźć się poniższe deklaracje:

* {
  margin: 0px 0px;
  padding: 0px 0px;
}
html, body {
  height: 100%;
  text-align:center;
}
#container{
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom:-29px; /* - height of footer */
}
#footer, #push {
  clear:both; 
  height:29px;
}

I właściwie to wszystko. Należy tylko pamiętać, że wysokość stopki, pusha i odejmowany margines muszą mieć tę samą wartość. 

Żywy przykład przyklejonej stopki do dołu

Kod źródłowy przykładu

0 0 vote
Article Rating