HTML5 & CSS3

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

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:

<body>
<div id="kontener">
    <div id="content">
    Treść w tym elemencie blokowym nie zawsze zajmuje całą wysokość ekranu 
    i w takim przypadku DIV ten zostawia poniżej wolne miejsce, 
    którego ilość uzależniona jest od rozdzielczości. 
    </div>
</div>
</body>

Oraz odpowiadający mu kod w arkuszu CSS:

body {
background: yellow;
}

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

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

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.

body {
background: yellow; height: 100%;
}

div#kontener {
width: 960px; height: 100%; margin: 0 auto;
}

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

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.

komentarzy 25

  • Awatar
    sos

    6 kwietnia 2012 17:04

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

    Odpowiedz
  • Awatar
    Mr.Mr

    3 lipca 2012 16:08

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

    Odpowiedz
  • Awatar
    punoljoe

    6 lipca 2012 18:33

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

    Odpowiedz
  • Awatar
    marcin

    10 sierpnia 2012 21:13

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

    Odpowiedz
    • Awatar
      Michał Kortas

      10 sierpnia 2012 21:15

      Działa dobrze, założeniem było „rozciągnięcie” div’a tak, aby wypełniał całe okno przeglądarki, czyli nawet wtedy, kiedy mamy mało contentu.

      Odpowiedz
  • Awatar
    Drzymal7

    6 listopada 2012 23:52

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

    Odpowiedz
  • Awatar
    Wloocibor z F

    10 kwietnia 2013 18:04

    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! ;)

    Odpowiedz
  • Awatar
    nonzzzc

    30 sierpnia 2013 11:02

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

    Odpowiedz
    • Awatar
      Mr.Mr

      30 sierpnia 2013 12:36

      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.

      Odpowiedz
  • Awatar
    Michu

    23 września 2013 10:24

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

    Odpowiedz
  • Awatar
    Mariola

    26 września 2013 15:13

    a co w przypadku struktury:

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

    Odpowiedz
    • Awatar
      Michał Kortas

      26 września 2013 19:01

      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%;

      Odpowiedz
      • Awatar
        Mariola

        27 września 2013 14:28

        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:(

        Odpowiedz
      • Awatar
        Michał Kortas

        27 września 2013 14:58

        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.

        Odpowiedz
      • Awatar
        Mariola

        27 września 2013 15:01

        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 :)

        Odpowiedz
  • Awatar
    Lukas

    4 października 2013 20:27

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

    Odpowiedz
  • Awatar
    kaz

    2 marca 2014 16:27

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

    Odpowiedz
  • Awatar
    kaz

    2 marca 2014 16:30

    <!– –>

    Odpowiedz
  • Awatar
    kaz

    2 marca 2014 16:31

    !DOCTYPE html

    Odpowiedz
  • Awatar
    Bartek Matuszewski

    1 stycznia 2015 04:50

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

    Odpowiedz
    • Awatar
      Comandeer

      1 stycznia 2015 15:30

      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)

      Odpowiedz
  • Awatar
    Deser11

    13 lutego 2015 04:04

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

    Odpowiedz
  • Awatar
    Deser11

    13 lutego 2015 04:09

    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.

    Odpowiedz
    • Awatar
      Comandeer

      13 lutego 2015 09:55

      Od tego jest np calc, pozycjonowanie czy jednostki typu vh. Naprawdę nie trzeba używać jQuery

      Odpowiedz

Zostaw odpowiedź