DIV height na 100% – wysokość na całą stronę


2 stycznia 2012 / Michał Kortas


Tworząc strukturę nowej witryny, bardzo częstym problemem, szczególnie dla początkujących webmasterów, jest „rozciągnięcie” elementu blokowego <div> na całą wysokość strony (a właściwie ekranu), nawet wtedy, kiedy content (treść) nie wypełnia całego okna. Sam kiedyś potrzebowałem takiego rozwiązania, a przeszukiwanie tysiąca postów na forach nie było wcale takim przyjemnym zadaniem. Zdaję sobie sprawę, że rozwiązań tego problemu może być całkiem sporo, dlatego liczę, że jeśli ktoś z Was zna inny sposób, poinformuję nas o tym w komentarzu na końcu poradnika.

Na początku przyjmijmy, że posiadamy, taki szkielet witryny:

Oraz odpowiadający mu kod w arkuszu CSS:

W takim przypadku otrzymamy układ, który dopasuje się do ilości treści, w elemencie #content:

Jak widać, teksu mamy mało, a zakładaliśmy, ze chcemy aby #content rozciągnął się na całą wysokość ekranu. Aby to zrobić, edytujmy kod w arkuszu CSS.

Element <body> jest również elementem blokowym, tak samo jak #kontener, i aby nasz content z treścią miał w ogóle prawo się „rozciągnąć”, musimy nadać im wysokość bezwzględną 100%. Natomiast dla bloku z treścią, zostaje ustawić minimalną wysokość (min-height) również na 100%. Efekt powinien być zadowalający.

Tak jak wspomniałem wcześniej, mile widziane będą Wasze sposoby, na uzyskanie podobnego efektu.



30 odpowiedzi na “DIV height na 100% – wysokość na całą stronę”

  1. sos pisze:

    działa ok, ale powinno być
    body {background: yellow; height: 100%;margin: 0 auto;}

  2. Mr.Mr pisze:

    wydaje mi się, że dla html też trzeba ustawić height:100%

  3. punoljoe pisze:

    mr.mr się nie myli. Ma być
    html, body {background: yellow; height: 100%;margin: 0 auto; }

  4. marcin pisze:

    nie działa to dobrze, bo to jest wysokość tylko do rozdzielczości ekranu, a raczej powinno być do wysokości contentu

  5. Drzymal7 pisze:

    A co, gdy przekroczymy wysokość strony? Obawiam się, że wtedy nasz div będzie sięgał tylko do tego punktu.

  6. Wloocibor z F pisze:

    Miłe zaskoczenie, kapnąć się po przeczytaniu „jakiegoś” artykułu, że został napisany przez znajomego ;)
    Co do samego arta, tak jak inni w komentarzach zwrócili uwagę, musi być jeszcze zdefiniowana wysokość do html. Czyli należy height: 100% ustawić w każdym nadrzędnym elemencie. Pozdrawiam! ;)

  7. nonzzzc pisze:

    nie działa!!!!!!!!!!!!!!!!!

    • Mr.Mr pisze:

      Kilkanaście wykrzykników nie rozwiąże problemu. Jeśli masz jakieś trudności z implementacją powyższego tutoriala to zapraszam na nasze forum. Załóż tam w odpowiednim dziale i na pewno uzyskasz pomoc.

  8. Michu pisze:

    Trochę trudno zauwać komuś, kto nadaje divovi width: 100%.

  9. Mariola pisze:

    a co w przypadku struktury:

    lub jeszcze bardziej zagnieżdżonej struktury?
    Niestety nadanie height: 100% dla html i body nie wystarcza

    • Witam,
      Należy wszystkim znacznikom „z zewnątrz” nadać height: 100%; a na koniec dla właściwego div’a (lub innego kontenera) min-height: 100%;

      • Mariola pisze:

        W takim wypadku jak mówisz bierze 100% wysokości body co nie jest pożądanym efektem, ponieważ do wysokości kontenera dochodzi wysokość stopki i nagłówka i razem mamy ponad 100% wysokości. Myślę że nie obędzie się tu bez javascriptu:(

      • A Faktycznie – nie wziąłem tego pod uwagę.
        Ewentualnie możemy zrobić to inaczej:

        Wtedy kontener przyjmie 100% height.
        Dla kontener damy jeszcze {position: relative;}, dla stopki {position: absolute; bottom: 0;}

        PS. W razie dalszej potrzeby dyskusji zapraszam na nasze forum – tam możemy poszukać jakiegoś dobrego rozwiązania.

      • Mariola pisze:

        Już to przetestowałam
        Niestety mam aplikację w .necie a tak jest tworzone mnóstwo niepotrzebnych divów i spanów. Chyba nad tym nie zapanuję i będę musiała poszukać rozwiązania javascriptowego :)

  10. Lukas pisze:

    W podanym przykładzie #content się rozciąga, a #kontener już nie gdy zawartości jest więcej niż 100% (widać jak się ustawi tło albo użyje firebug).

  11. kaz pisze:

    Przestaje działać gdy na początku napiszemy:

  12. kaz pisze:

    <!– –>

  13. kaz pisze:

    !DOCTYPE html

  14. Bartek Matuszewski pisze:

    html: css: #a{height: 100vh; }

    • Comandeer pisze:

      Ok… A co z domyślnymi marginesami przeglądarki? Nie lubimy pasków przewijania ;) Warto dorzucić border-boxa

      No i się zastanowić czy na pewno chcemy się pozbyć wsparcia dla starszych browserów (inna rzecz, że raczej user IE nie umrze, jak mu się div na całą stronę nie rozciągnie)

  15. Deser11 pisze:

    nic z tego nie będzie, jeśli masz jakikolwiek header/ stopkę itp, itd.

  16. Deser11 pisze:

    nic z tego nie będzie, jeśli masz jakikolwiek header/stopkę itp, itd, bo 100% = wielkość monitora + header + stopka (lub co tam jeszcze jest). Siedziałem nad tym z 2 noce i nic w CSS+HTML nie wymyśliłem ani nie znalazłem w internetach. A rzadko kiedy strona wygląda jak w powyższym artykule, tak więc po co dawać przykład tak bardzo niepraktyczny… (sprawdzający się tylko, gdy mam 2 divy oO )
    Najprostsze rozwiązanie jakie znalazłem to jQuery, gdzie wysokość diva z contentem = wielkość okna – wysokość header – wysokość stopki.

  17. Sławek Opole pisze:

    Nie do końca pomocny jest ten kod, powinno być:

    body {
    background: yellow; height: 100%;
    }
    html,
    body,
    #kontener ,
    ##content {
    height: 100%;
    min-height: 100%;
    }

    div#kontener {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;;
    }

    div#content {
    width: 100%; background: red;
    }

  18. Dariusz pisze:

    Height:100vh; -daje 100% wysokości dla strony

  19. Michał pisze:

    Nie jestem specem od programowania, więc nie potrafię ocenić, czy opisane tu rozwiązanie działa we wszystkich przypadkach. Natomiast w przypadku mojej prościutkiej, amatorskiej stronki (składającej się z 4 bloków) ZADZIAŁAŁO – tego właśnie szukałem.
    Z podziękowaniem dla Autora!

  20. Michał pisze:

    Z tym że – jak słusznie dodano w dyskusji – trzeba (u mnie) ponadawać wysokość 100 % elementom nadrzędnym.
    W ogóle, na mój zdrowy amatorski rozum, powinno być tak, że wystarczy dać height:x% i zawartość rozciągnie się na odpowiednią część kontenera – takiego kontenera, jaki jest. Skąd te bezsensowne komplikacje (to zażalenie do twórców HTML-a, oczywiście).
    Pozdrawiam wszystkich (ucieszony, że znalazł się sposób na problem).

  21. marius77 pisze:

    witam :)
    wystarczy tylko w body dać height:100vh; :)

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *