Zobacz demo Zobacz oryginalny tutorial

Sposób, który zaraz opiszę to najlepsze rozwiązanie naszego problemu, jakie udało mi się znaleźć. Autorem tutoriala jest Matthew James Taylor, a jego oryginalna treść znajduje się tu. Rozwiązanie jest bardzo proste i ogranicza się zaledwie do kilku linijek w CSSie.

Problem

W przypadku, gdy na stronie znajduje się mało treści, stopka może nie znajdować się na dole naszego ekranu, tak jak byśmy tego chcieli. Poniżej zostaje pusta przestrzeń, co może nie wyglądać za dobrze zwłaszcza przy większych rozdzielczościach monitorów.

Rozwiązanie

Główne zalety tej metody:

• Działa we wszystkich nowych przeglądarkach

  Kompatybilne przeglądarki: Firefox (Mac i PC), Safari (Mac i PC), Internet Explorer 7, 6 i 5.5, Opera i Netscape 8

• Dłuższa treść przesuwa stopkę w dół

  Na stronach z dużą ilością treści, stopka jest przesuwana w dół poniżej widocznego obszaru okna. Tak jak na zwykłej stronie, zobaczysz ją po przewinięciu strony na sam dół.

• W 100% poprawny CSS

• Brak JavaScript

  Obsługa JavaScript nie jest konieczna, bo metoda bazuje wyłącznie na CSSie.

Więc jak to działa?

Struktura HTML:

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

Potrzebujemy tylko 4 divy. Wewnątrz pierwszego diva (container), znajdują się trzy inne (header, body i footer). I to wszystko co potrzebujemy w HTMLu, resztą zajmie się już CSS.

CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Wysokość stopki */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Wysokość stopki */
   background:#6cf;
}

I jedna prosta reguła CSS dla IE 6 i 5.5:

#container {
   height:100%;
}

To wszystko! Prawda, że proste? :-) Trzeba tylko pamiętać, że wysokość stopki nie może być ustawiona na auto. Wybierz dowolną wysokość, ale upewnij się, że wartości są określone w em lub pikselach.