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

When we create websites, we sometimes want to div takes 100% window height, depending on the height of the user’s browser window . It is known that by setting the child’s height to 100%, it takes the entire space of its parent. That’s why if we want to child div takes all window height, we must set all its parents to have 100% height.

1. All parent elements must have height 100%;

body, html {
  height: 100%;
}

div {
  height: 100%;
}

2. Use Viewport height – vh

The second way to adjust the div’s height to your browser’s height is using viewport height.

Viewport height is a unit of length in css, that refers to the browser window – 1vh is equivalent to 1% of height, therefore the following entry will set the height of the div to 100% of browser window height:

div {
  height: 100vh;
}