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

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Для того, что бы растянуть блок на всю высоту страницы, можно выставить 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.

3 года назад

Вячеслав Межуревский

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

2 месяца

Bootstrap

Навык работы с SASS, Bootstrap 5 и Gulp для ускорения, упрощения и оптимизации процесса вёрстки и разработки сайтов

1 месяц

SASS

Навык работы с препроцессором SASS для эффективной и структурированной стилизации веб-приложений

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

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