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

Есть несколько способов растянуть блок на весь экран с помощью CSS:

  1. Использование свойства height: 100vh для задания размера высоты блока во всю высоту экрана:
.element {
  height: 100vh;
}
  1. Использование свойств top, left, right и bottom и позиционирование абсолютно:
.element {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
  1. Использование свойств width и height и позиционирование фиксированно:
.element {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  1. Использование свойства min-height и позиционирование относительно:
.element {
  position: relative;
  min-height: 100%;
}

Какой способ выбрать, зависит от того, как нужно расположить элемент на странице и на что настроен макет сайта.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как растянуть блок на весь экран css

Наш специалист свяжется с вами в ближайшее время и уточнит детали