Stopka na dole strony internetowej [ sposób 3 ]

   Było już o mniej lub bardziej zaawansowanych czy kłopotliwych sposobach przypięcia stopki do dołu naszej strony internetowej. Dziś natomiast będzie bardzo kontrowersyjny, moim zdaniem, sposób na przypięcie stopki do dołu strony internetowej. Z jednej strony ograniczamy się tylko do dwóch linijek kodu, który sprawa, że będziemy mieli pożądny przez nas efekt ale.. (jak zawsze jest jakieś ale..
Więc po kolei.. Gdy posiadamy podstawową strukturę kodu HTML (tu przykład HTMK5):

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ć.

Należy dodać do niej dwie linijki kodu. Pierwsza będzie trochę długa natomiast druga bardzo minimalna.. No to do dzieła..

   W pierwszej kolejności do należy dodać meta tag o nazwie viewport  może on wyglądać na przykłąd tak < meta name="viewport" content="initial-scale=1.0" >. Nie będę tutaj rozpisywał się o przeznaczeniu tego meta tagu. W google wystarczy wpisać tylko hasła: viewport, by mieć pełno informacji na ten temat).

Teraz nasz kod powinien wyglądać następująco:

kod:

< !DOCTYPE html>
< html lang="pl">
< head>
    < meta charset="utf-8">
    < meta name="viewport" content="initial-scale=1.0">
    < title>tytuł strony</title>
< /head>
< body>
    < div id="wrapper">
       < aside>WŁAŚCIWA TREŚĆ STRONY< /aside>
    < /div>
    < footer>TREŚĆ STOPKI STRONY< /footer>
< /body>
< /html>

Aby wszytko zadziałało teraz musimy dodać jeszcze jedną rzecz w CSS. Mianowicie musimy odsunąć stopkę do dołu strony w tym celu dla naszego diva o nazwie wrapper musimy dodać wysokość, którą określimy jako 100vh (vh - viewport height). A więc powinno to wyglądać tak:

kod:

#wrapper {
    height: 100vh;
}

I to tyle. Stopka będzie zawsze na dole ekranu. Natomiast nasz kompletny kod powinien wyglądać następująco:

kod:

< !DOCTYPE html>
< html lang="pl">
< head>
    < meta charset="utf-8">
    < meta name="viewport" content="initial-scale=1.0">
    < title>tytuł strony</title>
    < style>
        #wrapper {
            height: 100vh;
        }
    < /style>
< /head>
< body>
    < div id="wrapper">
       < aside>WŁAŚCIWA TREŚĆ STRONY< /aside>
    < /div>
    < footer>TREŚĆ STOPKI STRONY< /footer>
< /body>
< /html>

Uwaga końcowa..

   Oczywiście stopka zawsze będzie na dole strony przyklejona. Nie wiem co by się działo lecz jak już wcześniej powiedziałem istnieje jakieś ale.. Mianowicie chodzi o to, że nasz weapper zajmuje teraz - mówiąc w uproszczeniu - 100% powierzchni okna. Co za tym idzie nasza stopka jest na dole ekranu, lecz w odróżnieniu od poprzednich opcji, aby zobaczyć stopkę - nawet jeśli nasza strona nie jest wypełniona - trzeba scrollować myszką w dół ( tzw. kółkiem na myszce kręcimy w górę, by strona przesuwała się w dół 😁 ). Lecz i na to jest prosty sposób, by temu zaradzić..

Mały BONUS..

   Mianowice by pozbyć się efektu naszego scrollowania przy pustej zawartości strony by zobaczyć naszą stopkę należy przesunąć stopkę o margines górny który będzie dokładnie równał się wysokości naszej stopki. A więc jeśli nasza stopka ma wysokość 20 pixeli to margines górny musi wynosić -20 pixeli. W kodzie CSS będzie to wyglądało tak:

kod:

footer {
    margin-top: -20px;
    height: 20px;
}

A nasz kompletny kod będzie wyglądał tak:

kod:

< !DOCTYPE html>
< html lang="pl">
< head>
    < meta charset="utf-8">
    < meta name="viewport" content="initial-scale=1.0">
    < title>tytuł strony</title>
    < style>
        #wrapper {
            height: 100vh;
        }
        footer {
            margin-top: -20px;
            height: 20px;
        }
    < /style>
< /head>
< body>
    < div id="wrapper">
       < aside>WŁAŚCIWA TREŚĆ STRONY< /aside>
    < /div>
    < footer>TREŚĆ STOPKI STRONY< /footer>
< /body>
< /html>