Как задать элементу ширину и высоту во весь экран?

Question

Для задания размеров во весь экран используются единицы vw и vh.
100vw соответствует ширине viewport, а 100vh — его высоте.
Также можно использовать абсолютное позиционирование.
Выбор способа зависит от контекста верстки.

YeaHub · Accepted Answer

В CSS есть несколько корректных способов задать элементу размеры, равные размеру экрана браузера.ОпределениеViewport — это видимая область страницы внутри окна браузера.Основной способ через viewport-единицыСамый распространенный вариант — использование vw и vh:.fullscreen {
  width: 100vw;
  height: 100vh;
}
1vw = 1% ширины viewport1vh = 1% высоты viewportАльтернативный способ через позиционированиеМожно использовать абсолютное или фиксированное позиционирование:.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
Важные нюансы100vh на мобильных устройствах может учитывать адресную строку100vw может вызывать горизонтальный скролл из-за scrollbarИногда требуется дополнительная корректировкаВыводДля большинства задач подходят 100vw и 100vh. При сложных layout-сценариях можно использовать позиционирование, учитывая особенности мобильных браузеров.