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

В CSS есть несколько корректных способов задать элементу размеры, равные размеру экрана браузера.

Определение

Viewport — это видимая область страницы внутри окна браузера.

Основной способ через viewport-единицы

Самый распространенный вариант — использование vw и vh:

.fullscreen {
  width: 100vw;
  height: 100vh;
}

• 1vw = 1% ширины viewport

• 1vh = 1% высоты viewport

Альтернативный способ через позиционирование

Можно использовать абсолютное или фиксированное позиционирование:

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Важные нюансы

• 100vh на мобильных устройствах может учитывать адресную строку

• 100vw может вызывать горизонтальный скролл из-за scrollbar

• Иногда требуется дополнительная корректировка

Вывод

Для большинства задач подходят 100vw и 100vh. При сложных layout-сценариях можно использовать позиционирование, учитывая особенности мобильных браузеров.