chevron-left chevron-right

[CSS] Stopka zawsze na dole okna przeglądarki

Dzisiaj przedstawię krótką poradę dotyczącą sposobu umieszczenia stopki tak, aby znajdowała się ona zawsze na dole okna przeglądarki.

Nasz kod HTML wygląda tak:

<div id="tresc">
</div>
<div id="stopka">
</div>
Natomiast kod CSS dla stopki wygląda następująco:
#stopka {
	position: fixed;
	height: 40px;
	background: #993300;
	bottom: 0;
}
W ten sposób zawsze osiągniecie efekt zatrzymania stopki w dolnej części okna przeglądarki.
Tutaj jest demo: stopka na dole przeglądarki

  • Tomek

    Dobry i krótki sposób. Chciałem dodać, że mnie spotkał ciekawy problem z nim związany. Powyższe rozwiązanie nie działało w WordPressie przy zastosowaniu własnego szablonu. Po długim boju okazało się, że plik php zapisany był w formacie UTF8 zamiast ANSI i to powodowało jakimś sposobem problem. Możecie zwrócić na to uwagę jak coś nie będzie trybić 🙂

  • Kondor

    Wiem, się czepiam :), ale powyższy sposób nie działa oczywiście w IE6, a że jestem tą przeglądarką „zafascynowany” nie omieszkałem o tym wspomnieć 🙂

  • zdaję sobie z tego sprawę, ale jestem zwolennikiem „ruchu” wycofania IE6 z codziennego użytku. Nastąpił na tyle duży postęp w technologii internetowej, że odwoływanie się w dalszym ciągu do IE6 jest już bezcelowe. Nie zamierzam wspierać archaizmów w swoich artykułach, ale dziękuję za zwrócenie uwagi 🙂

  • w swojej działalności takie rzeczy (optymalizacja pod IE6) robię już tylko i wyłącznie na wyraźne życzenie osoby zlecającej stronę

  • Kondor

    🙂
    Ja również od pewnego czasu nie zwracam już uwagi na wybryki IE6, szkoda mojego zdrowia. Tym niemniej mój komentarz był dla hmm „internetowych purystów” u których stronka ma być cacy w każdej przeglądarce, choć muszę wspomnieć, że nie olewam jej totalnie i zwykle używam znanych mi „IE6 hacków”,ale to tak dla świętego spokoju 😉

  • Tomasz

    ciekawe, bo jeszcze około 49% świata używa IEx 6, a 11% IEx 5 …
    nie wszędzie doszedł FireFox czy też Opera
    o tym się zapomina, co później jest powodem kłopotów w poprawnym odczytywaniu strony
    tak samo kodowanie w UTF, ciekawe gdzie pisze że świat koduje w narzuconym standarcie, który przy robieniu stron wschodnio-azjatyckich nie ma w ogóle zastosowania – a poprawnym kodowaniem stron w języku polskim jest standard ISO

  • Na polskie warunki mnie nie interesuje już IE6, bo jego trzeba w jakiś sposób wycofać.
    Jeśli chodzi o kodowanie, to UTF-8 jest zdecydowanie lepszym wyborem od ISO – bo zapewnia kompatybilność kodowania języka w każdych warunkach.
    Wspominasz o robieniu stron wschodnioazjatyckich. Jeśli takie będę robił, to będę się nad tym zastanawiał. Póki co, zachód przestawia się na UTF-8 i ja z tego kodowania będę korzystał, bo mnie nigdy nie zawiodło.

  • Marcin

    Witam jestem zdania: jak się ktoś nie porusza do przodu to się cofa. Piotrze, dziękuję że stworzyłeś ten blog i za artykuły, które mnie interesują z tego co zauważyłem to znam tylko 1 osobę z moich znajomych i rodziny, która korzysta z IE6, więc moim zdaniem cofanie się do tej przeglądarki jest bezcelowe! Tomaszu wiem, że niektórzy jak chcą się czegoś czepnąć to i tak postawią na swoim, ale w końcu nie trzeba komentować i upierać się przy swoim zdaniu za wszelką cenę jeżeli sporo osób nie ma zamiaru zmienić zdania!
    pozdrawiam

  • Comandeer

    Czasami stopka nie chce się „przykleić” do lewej krawędzi ekranu przy width:100%, ale left:0 załatwia sprawę.

  • Srrs

    Przydatna rzecz, tylko mam mały problem:
    jak zrobić, by tekst nie był po prawej stronie tylko na środku strony?
    nie działa, margin: auto; też nie działa, text-align: center też nie.
    Jaki sposób użyć, by zadziałał ?
    Pozdrawiam.

  • Popatrz sobie na poniższy kod CSS i go użyj:

    #nav{
      border:1px solid #ccc;
      border-width:1px 0;
      list-style:none;
      margin:0;
      padding:0;
      text-align:center;
    }
    #nav li{
      display:inline;
    }
    #nav a{
      display:inline-block;
      padding:10px;
    }
  • Omzigus

    A czy da się zdefiniować stopkę w arkuszu .css? Chciałbym, żeby przy każdej stronie która korzysta z danego stylu była identyczna stopka, ale nie jestem w stanie tego uzyskać mimo podanych tu informacji. Jak to uzyskać?

  • żeby stopka wyglądała tak samo na różnych stronach to oprócz danego stylu musisz mieć podobną strukturę HTML, a wtedy do stopki przypisujesz daną klasę czy id z pliku CSS

  • Patryk

    Proste przyklady sa najlepsze, szkoda ze w inni czasem o tym zapominaja. dzieki.

  • Piotrek

    Witam. Przykład dobry, ale zauważ że przy zmniejszania okna przeglądarki stopka zawija się/ wjeżdża na treść innych contenów. Masz na to jakąś radę?

  • KB

    Powinno być:

    #tresc {
    width: 100%;
    margin-bottom:40px;
    }
    #stopka {
    width: 100%;
    position: fixed;
    height: 40px;
    background: #993300;
    bottom: 0;
    }

  • Piotr Nalepa

    tak też może być 🙂