Stopka na dole strony internetowej [ sposób 1 ]

   Dziś zajmiemy się kwestią dotyczącą stopki strony internetowej. Dokładniej rzecz mówiąc, tak aby niezależnie od wypełnienia strony i wysokości naszego ekranu / rozdzielczości. Istnieje na to kilka, jak nie kilkanaście, metod. Przez kolejne wpisy postaram się przedstawić na łamach bloga wszystkie znane mi metody. Dziś zajmiemy się najprostszą metodą.

Posiadając standardową budowę kodu strony (tu przykład HTML 5):

kod:

< !DOCTYPE html>
< html lang="pl">
< head>
    < meta charset="utf-8">
    < title>tytuł strony</title>
< /head>
< body>
    < aside>WŁAŚCIWA TREŚĆ STRONY< /aside>
    < footer>TREŚĆ STOPKI STRONY< /footer>
< /body>
< /html>

Oczywiście z racji tego, że bloger nie ma funkcji wstawiania kodów - no chyba że ja nie znam na to sposobu - w każdym nawiasie trójkątnym przed jego zawartością wstawiłem spację, którą należy zignorować.

Przechodząc już do samego kodu należy w sekcji footer dodać dwie następujące reguły: position: fixed; oraz bottom: 0px;. W sumie to byłoby na tyle.

Ubierzmy to teraz wszystko w kod CSS:

Trochę wizualizuję nasz kod, by każdy wiedział co sie dzieje. Na przykład może to wyglądało następująco:

kod:

aside {
 background-color: orange;
 padding:44px;
}

footer {
 background-color: pink;
 padding:44px;
 position: fixed;
 bottom: 0px;
}

   Teraz można zauważyć, że nasza stopka nie rozciąga się na całą szerokość naszego okna przeglądarki, więc aby to naprawić wystarczy dodać do sekcji footer jeszcze jedną właściwość. A mianowicie: width: 100%;. Po tym zabiegu wszystko już powinno być poprawnie wyświetlane. Oczywiście zamiast szerokość stopki ustawiać 100% możemy podać taką jaką konkretnie chcemy uzyskać.

Nasz kod CSS powinie teraz wyglądać tak:

kod:

aside {
 background-color: orange;
 padding:44px;
}

footer {
 background-color: pink;
 padding:44px;
 position: fixed;
 bottom: 0px;
 width: 100%;
}

Kompletny kod:

kod:

< !DOCTYPE html>
< html lang="pl">
< head>
    < meta charset="utf-8">
    < title>tytuł strony</title>
    < style>
     aside {
      background-color: orange;
      padding:44px;
     }

     footer {
      background-color: pink;
      padding:44px;
      position: fixed;
      bottom: 0px;
      width: 100%;
     }
    < /style>
< /head>
< body>
    < aside>WŁAŚCIWA TREŚĆ STRONY< /aside>
    < footer>TREŚĆ STOPKI STRONY< /footer>
< /body>
< /html>

Podsumowanie:

   Niby prosty sposób, ale nie do końca taki cudowny. Oczywiście nasza stopka zawsze będzie przyklejona do dołu strony, ale pojawia się jedna wątpliwośc.. Niestety, gdy skalujemy okno naszej przeglądarki pod względem wysokości stopka dochodzi do takiego momentu kiedy zaczyna nam układać się domyślnie nad naszą właściwą treścią strony internetowej. Niby prosty i szybki sposób, ale nie do końca taki idealny.