Tworząc strony internetowe zdarza się, że chcemy, aby div z określonymi informacjami zajmował całą wysokość okna, niezależnie od wysokości tego okna. Wiadomo, że ustawiając wysokość dziecka na 100% zajmuje ono całą przestrzeń swojego rodzica. Zatem aby div zajmował całą wysokość okna, wszyscy jego rodzice muszą także mieć ustawioną taką wysokość.

1. Wszystkie elementy – rodzice muszą mieć wysokość ustawioną na 100%

body, html {
  height: 100%;
}

div {
  height: 100%;
}

2. Użyj Viewport height – vh

Drugim sposobem na dostosowanie wysokości div-a do wysokości przeglądarki jest użycie viewport height.

Viewport height to jednostka długości w css, która odnosi się do okna przeglądarki – 1vh to odpowiednik 1% wysokości, dlatego poniższy zapis ustawi wysokość div-a na 100% wysokości okna przeglądarki:

div {
  height: 100vh;
}