Webdesign: Sticky footer czyli przylegająca stopka strony

2012-07-23 Webdesign

Jeśli posiadamy na naszej stronie internetowej tzw. stopkę, to warto ją zaprogramować w taki sposób, aby ta zawsze przylegała do dolnej krawędzi strony. Efekt jest prosty do osiągnięcia a jednocześnie daje użytkownikowi wrażenie profesjonalnej i zwartej strony. Zanim przejdziemy do odpowiedniego kodu źródłowego, zobaczmy o co tutaj chodzi.

Kiedy na naszej witrynie mamy pokaźną ilość tekstu to wszystko jest poprawnie. Treści nie mieszczą się w 100% na ekranie, pojawia się pasek przewijania i na samym dole tekstu nasza stopka. Problem pojawia się w momencie kiedy ilość treści zajmuje mniej miejsca niż wysokość naszego ekranu. Wystarczą dwa zdania, które zmieszczą się w jednej linijce – zaraz za nimi pojawi się stopka, która domyślnie “przykleja się do góry”. Pusty obszar pod nią daje wrażenie błędu w projekcie. Stopka uciekła do góry i wyświetliła się zaraz po jednozdaniowym fragmencie tekstu. Wrażenie czysto estetyczne pozostawia tutaj wiele do życzenia.

Aby wymusić na stopce przyleganie do dołu, konstrukcja naszej strony powinna się opierać na poniższych fundamentach.

<!DOCTYPE html>
<html>
<body>

  <section id="wrap"> <!-- wrap - start -->

   <article>
   <!-- tutaj treść naszej strony -->
   </article>

   <section id="push" class="break"></section>

  </section> <!-- wrap - stop -->

  <footer>treść stopki</footer>

 </body>
</html>

Wyjaśnienie – znacznik “body” obejmuje swoim zasięgiem absolutną całość witryny. W nim, znacznik o identyfikatorze “wrap” obejmuje swoim zasięgiem wszystko poza znacznikiem stopki. Przed zamknięciem znacznika wrap umieszczamy znacznik, którego wysokość musi być równa wysokości stopki.

Zobaczmy teraz kod CSS.

/**
* przylegająca stopka do dołu - start
*/
html, body
{
  height: 100%;
}

section#wrap
{
  height: auto !important;
  margin: 0 auto -25px; /** MINUS wysokość stopki */
  min-height: 100%;
  position: relative;
}

section#push
{
  clear: both;
  height: 25px; /** tyle co wysokość stopki */
}

footer
{
  bottom: 0px;
  position: relative;
  width: 100%;
  height: 25px; /** wysokość stopki - oczywiście może być inna jednak wtedy należy analogicznie zmienić wartość dla wrap i push */
}

.break
{
  clear: both;
}
/**
* przylegająca stopka do dołu - stop
*/

Od teraz nasza stopka bez względu na ilość tekstu będzie przylegała do dolnej krawędzi strony.

Do NOT follow this link or you will be banned from the site!