Stopka na dole strony internetowej [ sposób 2 ]

   Ostatnio było o stopce na dole strony internetowej przy wykorzystaniu właściwości CSS, którą jest position: fixed  (więcej o tym tutaj). Jak już wspominałem, pod pewnymi względami, nie jest to idealny sposób. Dziś zajmiemy się bardziej dopracowaną metodą, ale i też trochę bardziej pracochłonną.. Nie przedłużając..

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>
    < div id="wrapper">
       < aside>WŁAŚCIWA TREŚĆ STRONY< /aside>
    < /div>
    < 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 CSS będzie to wyglądało następująco: tworzymy regułę html, body oraz wrapper i footer, które kolejno będą zawierać:

kod:

html, body {
  height: 100%;
}

#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -X;
}

footer {
  height: X;
}

   I teraz NAJWAŻNIEJSZA zasada umieszczania stopki na dole strony internetowej tą metodą. W "sekcji" #wrapper oraz footer mamy dwa parametry, w których występuję właściwość oznaczona jako X. Zamiast X podajemy dowolną (identyczną) wartość np. wyrażoną w pikselach z tym że w "sekcji" #wrapper ma być to ujemna wartość, a w "sekcji" footer ma być dodatnia wartość. Może lepiej zobrazuje to na przykładzie kodu. Będzie to wyglądało następująco:

kod:

html, body {
  height: 100%;
}

#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -21px;
}

footer {
  height: 21px;
}

Oto tym sposobem nasza stopka będzie osadzona na dole naszego okna przeglądarki niezależnie od wysokości okna.
I gotowe ;) A nasz kod powinien wyglądać tak:

kod:

< !DOCTYPE html>
< html lang="pl">
< head>
    < meta charset="utf-8">
    < title>tytuł strony</title>
    < style>
       html, body {
       height: 100%;
      }

      #wrapper {
       min-height: 100%;
       height: auto !important;
       height: 100%;
       margin: 0 auto -21px;
       background-color: red;
      }

      footer {
       height: 21px;
       background-color: yellow;
      }
    < /style>
< /head>
< body>
    < div id="wrapper">
       < aside>WŁAŚCIWA TREŚĆ STRONY< /aside>
    < /div>
    < footer>TREŚĆ STOPKI STRONY< /footer>
< /body>
< /html>

Dla lepszego zobrazowania sytuacji pozwoliłem sobie dodać do kodu końcowego kolory tła dla głównej zawartości strony i stopki.

Mały BONUS..

   Przy zawijaniu strony w pionie możemy chcieć, aby w pewnym momencie stopka naszej strony internetowej była w większym odstępie niż główna zawartość naszej strony. Nic nie stoi na drodze by to uczynić, wystarczy tylko do naszego kodu HTML dodać np. < div id="spacerFooter">< /div>, a w samym kodzie CSS z edytować footer na footer, #spacerFooter i dodać jeszcze #spacerFooter z parametrem np. padding-top: 20px;. Nasz kod kompletnie będzie teraz wyglądał następująco:

kod:

< !DOCTYPE html>
< html lang="pl">
< head>
    < meta charset="utf-8">
    < title>tytuł strony</title>
    < style>
       html, body {
       height: 100%;
      }

      #wrapper {
       min-height: 100%;
       height: auto !important;
       height: 100%;
       margin: 0 auto -21px;
       background-color: red;
      }

      #spacerFooter {
       padding-top: 20px;
      }

      footer, #spacerFooter {
       height: 21px;
       background-color: yellow;
      }
    < /style>
< /head>
< body>
    < div id="wrapper">
       < aside>WŁAŚCIWA TREŚĆ STRONY< /aside>
       < div id="spacerFooter">< /div>
    < /div>
    < footer>TREŚĆ STOPKI STRONY< /footer>
< /body>
< /html>

   Oczywiście wartość padding-top: .. możemy podać taką o jaką chcemy odsunąć stopkę od właściwej zawartości strony i nie musi być to wcale 20px. Oczywiście zabieg będzie widoczny jedynie w krytycznym momencie..

Uwaga końcowa..

   Może nie każdy o tym wie, ale wyliczając wysokość stopki należy wziąć pod uwagę takie rzeczy jak padding i border oraz ewentualną już podaną wysokość stopki (chyba o niczym nie zapomniałem 🤔  😁 ). Teraz obrazując sytuację.:

Załóżmy, że height stopki ustawiliśmy na 44px do tego dodaliśmy padding 5px oraz border 2px. W naszym założeniu padding jak i border tyczy też się całej stopki czyli góra, dół, prawa i lewa strona. Z racji tego, że do wyliczenia wysokości nie interesuje nasz prawa i lewa strona, więc wyliczeniach możemy od razu je pominąć. Naszych wliczeń będą wyglądać tak:

padding-top + padding-bottom + border-top + border-bottom + height = wysokość naszej stopki

Czyli:

5px + 5px + 2px + 2px + 44px = 58px