Как растянуть блок по высоте css

Question

Accepted Answer

Для того, что бы растянуть блок на всю высоту страницы, можно выставить height у выбранного элемента и у всех его предков вплоть до html - 100%. Но обычно так не делают, вместо этого используются не процентные значения а, единицы относительной длины - vh и vw. Эти аббревиатуры можно расшифровать, как viewport height и viewport width — высота и ширина области просмотра соответственно. 1vh равен одному проценту от высоты области просмотра, 1vw равняется одному проценту от ширины области просмотра.

Рассмотрим пример:

<body>
  <div class="all-height"></div>
</body>

Стили:

.all-height {
  background-color: #38d9a9;
  height: 100vh;
  width: 200px;
}

При просмотре на всю высоту окна браузера будет отображена бирюзовая полоса шириной в 200px.

Рассмотрим пример:


   class="all-height">

Стили:

.all-height {
  background-color: #38d9a9;
  height: 100vh;
  width: 200px;
}

При просмотре на всю высоту окна браузера будет отображена бирюзовая полоса шириной в 200px.

Как растянуть блок по высоте css

Похожие вопросы