Stopka u dołu strony. Rozwiązanie w CSS.

Byłam prawie przekonana, że nie da się tego zrobić. Problem umieszczenia stopki tam, gdzie powinna ona być, czyli u dołu strony, zawsze przyprawiał mnie o ból głowy. Tak, można to zrobić przy pomocy JavaScript, jednak nie chciałam polegać na opcji, która może być w przeglądarce wyłączona. Nie chciałam również wprowadzać reguł specyficznych dla różnych przeglądarek. Nawet to rozwiązanie, na które natknęłam się niedawno, nie obyło się bez uwzględniania nieprawidłowego zachowania Internet Explorera.

Definicja problemu

Oto problem, z którym chciałam się zmierzyć:
Przesunięcie stopki w dół strony zawierającej mało treści.

Problem dotyczy klasycznego układu treści, w którym u góry strony umieszczam nagłówek, u dołu – stópkę, a treść znajduje się pomiędzy tymi elementami.

Kiedy treści jest niewiele, stopka widoczna jest tuż pod treścią strony, co nie wygląda zbyt estetycznie: oto przykład strony z małą ilością treści.

Gdy jest malo treści, stopka znajduje się w połowie okna przeglądarki.

CSS

Rozwiązanie okazuje się niezwykle proste.

html, body

Elementy html oraz body mają wyzerowane wartości atrybutów margin i padding oraz – co bardzo ważne – ustaloną wartość atrybutu height na 100%. Dzięki temu możliwe jest ustalenie procentowej wysokości na elemencie container.

        html, body {
		       margin:0;
		       padding:0;
		       height:100%;
        }

container

Element otaczający (container) posiada ustaloną minimalną wysokość na min-height: 100% , dzięki czemu będzie się on rozciągał na cały obszar okna przeglądarki nawet wówczas, gdy na stronie jest bardzo mało treści. Element ten jest pozycjonowany regułą position: relative, dzięki czemu można wypozycjonować stopkę względem niego.

	#container {
		min-height:100%;
		position:relative;
	}

footer

Stópka jest pozycjonowana względem elementu container, który w modelu pudełkowym jest pudełkiem bezpośrednio otaczającym stopkę. Jest to pozycjonowanie (position: absolute). Ustalamy wysokość stopki (height: 60px) oraz jej odległość od dolnej krawędzi pudełka otaczającego (bottom: 0px).

        #footer {
		position:absolute;
		bottom:0;
		width:100%;
		height:60px;		/* Wysokość stopki */
		background:#b5fbbd;
	}

middle

Na wypadek, gdyby treści znajdującej się wewnątrz pudełka middle jeszcze przybyło, należy zapewnić, że treść nie będzie na stopkę nachodziła, a nawet, że będzie ona odsunięta od górnej krawędzi stopki. Wystarczy więc ustalić padding na wartość większą bądź równą wysokości stopki.

	#middle {
		padding:10px;
		padding-bottom:60px;	/* Wysokość stopki */
	}

Cały css

Gdy złożymy te reguły razem, otrzymamy dość prosty css:

        html, body {
		margin:0;
		padding:0;
		height:100%;
	}
	#container {
		min-height:100%;
		position:relative;
	}
	#header {
		background:#fbb5b8;
		padding:10px;
	}
	#middle {
		padding:10px;
		padding-bottom:60px;	/* Wysokość nagłówka */
	}
	#footer {
		position:absolute;
		bottom:0;
		width:100%;
		height:60px;		/* Wysokość nagłówka */
		background:#b5fbbd;
	}

Gotowa strona wygląda następująco: Strona z małą ilością treści i stopką umieszczoną na dole strony

Nawet, gdy jest malo treści, stopka znajduje się u dołu okna przeglądarki.

Aktualizacja

Uważny czytelnik zauważy, że obecność elementu <div id=content> nie jest konieczna. Podobny efekt uzyskać można wykorzystując fakt, że element <body> znajduje się wewnątrz elementu <html>. Jeśli zatem ustalimy wysokość elementu <html> na 100%, to wtedy element <body>, którego rozmiar podany w procentach wyznaczany jest na podstawie rozmiaru bloku zawierającego (czyli bloku utworzonego przez element <html>), może mieć ustaloną minimalną wysokość również na 100%. <body> „rozciągnie się” tak, aby zająć obszar nie mniejszy niż 100% elementu <html> (zajmującego 100% wielkości okna przeglądarki).

Uwaga! Rozmiar <body> może zająć więcej miejsca w sytuacji, gdy jego zawartość zajmie więcej, a więc „przeleje” się poza krawędź okna przeglądarki (i pojawią się pionowe paski przewijania). W takim przypadku chcemy, aby stopka nie tkwiła u dołu widocznego obszaru (co stanie się, gdy dla <body> utworzymy regułę height: 100%), lecz pod całą treścią (min-height: 100% zapewnia takie właśnie zachowanie).

Uproszczony CSS

Można więc zastosować poniższy CSS dla elementów <body> i <html>, pamiętając o usunięciu <div id=content> z html-a:

  html, body {
    margin:0;
    padding:0;
  }

  html {
    height: 100%;
  }

  body {
     min-height: 100%;
    position:relative;
  }

Oto przykład strony, w której rolę elementu <div id=”container”> pełni <body>.

Jeśli jednak dla <body> zamiast min-height: 100% użylibyśmy height: 100%, przy większej ilości tekstu zobaczymy taki efekt.

Źródła

1. Oryginalny artykuł, z którego zaczerpnęłam pomysł:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

2. Inne rozwiązania – między innymi przy użyciu fragmentu JavaScript-u:
http://www.alistapart.com/d/footers/

Coś dla miłośników CSS

Jak znaleźć nieużywane klasy CSS

Czy wiesz jak znaleźć nieużywane klasy CSS na stronie? Sprawdź podlinkowany wpis. Znajdziesz też w nim krótki filmik instruktażowy!

22 komentarze do “Stopka u dołu strony. Rozwiązanie w CSS.”

  1. Masz calkowita racje. Ze wzgledu na zroznicowanie interpreterow przegladarek, takie proste czynnosci jak wstawienie stopki urastaja do rangi problemu.. TO chore…ale zaznaczam, ta choroba dotyczy glownie IE.

    Tak dlugo jak MS bedzie tkwil we wlasnym intelektualnym łanie, hipokryzji i próżnosci, ie nadal bedzie sprawiala problemy

    Fajnie ze przedstawiles rozwiazanie. Robie wiele stronek ale zawsze cos spartole przy stopce.. Zaczne zagladac tu regularnie, a zamieszczone rozwiazanie bede traktowal jako pomocny wzor :- )

    Pozdrawiam

    1. Dobry.
      Co prawda testowałem to tylko na FireFox i Chrome, ale u mnie zadziałało to:
      footer {
      position: fixed;
      bottom: 0;
      }
      I tylko tyle.
      Pozdrawiam.

      1. Fakt, u mnie nawet działa tylko twoja wersja (testowane na chrome) , a sposób z artykułu ni cholery nie działa. Dzięki za wpis Marcin 😉

  2. Super. Nawet nie wiesz jak bardzo mi pomógł Twój wpis 🙂 Pozycjonowanie stopki też przyprawiało mnie o niemały ból głowy. Chyba będę tutaj zaglądał regularnie 😉

    1. Cieszę się, że wpis Ci się przydał. Nie zawsze jednak rozwiązania problemów „przyprawiających o ból głowy” są proste i eleganckie, dlatego warto sprawdzić, czy nie wprowadzamy przypadkiem „ulepszenia”, którego utrzymanie będzie nas później kosztowało sporo czasu 🙂

      Zapraszam do częstych odwiedzin naszego bloga – pozdrawiam!

  3. no dobra, ale jesli masz za duzo tekstu to wtedy stopka nachodzi na niego, a tak byc nie powinno, czyli rozwiazanie nie jest dobre

    1. W przykładzie http://kamila.chyla.pl/projekty/footer-example/example2.html nie nachodzi – widoczny jest cały tekst strony (body), a stopka staje się niewidoczna. Natomiast w przykładzie http://kamila.chyla.pl/projekty/footer-example/example3.html, tak jak piszesz, stopka widoczna jest cały czas podczas skalowania okna przeglądarki i „nachodzi” na tekst.

      Cóż, wydaje mi się, że trzeba się zastanowić, jakie dokładnie zachowanie byłoby satysfakcjonujące. Sama skłaniam się raczej do refleksji, że pokazanej tutaj techniki nie należy w ogóle używać. Wymaganie, aby stopka była cały czas widoczna u dołu strony, jest ciekawym wyzwaniem teoretycznym, ale to wciąż taki „trik”, którego nie wykorzystałabym raczej w projekcie strony dla klienta.

      Odpowiem pytaniem: jak Twoim zdaniem powinno być? Może po prostu powinno być tak, jak się tego spodziewa użytkownik przeglądarki (tj. bez żadnych tego typu trików)? Byłoby to przecież zgodne ze starą, dobrą zasadą projektowania interfejsów użytkownika – z zasadą najmniejszego zaskoczenia 🙂

      Pozdrawiam!

  4. Nie do końca mnie zadowala to rozwiązanie, ponieważ stopka pokazuje się poza obszarem okna, czyli pojawia się scroll (height)

  5. Problem pojawia się jak tworzymy responsywną stronę- wtedy po zmniejszeniu szerokości treść strony nachodzi nam na footer (tzn. „zlewa się”), ze względu na pozycje absolutną.

  6. Niestety, rozwiązanie przy małej ilości treści posiada wady.
    Przy zmniejszeniu wysokości okna i pojawieniu się pionowego paska przewijania, stopka również się przewija.
    Zaklajstrujemy to pozycją fixed w miejsce absolutnej 😉

  7. Walczyłem cała niedzielę z tą nieszczęsną stopką i w końcu mi się udało 🙂 Wszystko robiłem wg podanych tutaj informacji, jednak zapomniałem, że używam float w swoich kontenerach i stopka przy większej ilości tekstu pokrywała się z nim. Wystarczyło dodać do #container lub jeśli ktoś woli bez to do body float: left i width: 100% i wszystko ładnie się układa.

  8. Rozwiązanie może być jeszcze prostsze. Jeśli wszystkie elementy w układzie są pływające, stopkę należy zablokować używając polecenia clear:both.
    Przykład:
    .footer{
    clear:both;
    width:100%;
    float:left;
    display:block;}

  9. Witam,
    szukałem właśnie takiego rozwiązania.
    Jest początkującą osobą w wp i nie bardzo wiem gdzie powinnienem dodać ten css aby ta stopka nie wyświetlała się na środku erkanu.
    do którego pliku powinienen to dodać?
    Pozdrawiam.

    1. Oj, modyfikacja w motywie tonie takie proste, bo HTML który trzeba ogarnąć jest rozbity na wiele plików. Jak zaczniesz zmieniać strukturę motywu, który skądś pobrałeś i przyjdzie jego aktualizacja, to zmiany stracisz. A motyw potomny, który zmienia podstawowe pliki motywu to też nie jest dobry pomysł. Najlepiej wybrać motyw, który już to ogrania. Jakiego używasz?

  10. Dzieki za wpis – jak przejdę na strony w kodzie bardzo się przyda 🙂 tymczasem w Wordpresie tak prosto się nie da. Które motywy mają ogarniętą stopkę? Niestety Pinnacle, choć ma sporo możliwości customizacji jest słaby pod tym względem.

    1. Anna, z darmowych motywów najlepszy jest Astra, potem GeneratePress i OceanWP. Nie sprawdzałam stopki, ale jeśli nie mają tego ogarniętego, to bardzo bym się zdziwiła…

  11. Bardzo ciekawe i praktyczne rozwiązanie. Jednak obecnie na większości stron jest na tyle dużo treści (nawet momentami za dużo), że problem taki coraz rzadziej w ogóle występuje. Niemniej przydatny sposób! Pozdrawiam.

Skomentuj Krzysiek Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany.