Установите размер Div на полный экран: CSS и JavaScript

Чтобы установить размер элемента

на весь экран, вы можете использовать различные методы в зависимости от ваших требований. Вот несколько подходов, которые вы можете рассмотреть:

Метод 1: свойства CSS heightи width

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.full-screen-div {
  height: 100vh;
  width: 100vw;
}

Этот метод устанавливает элементы и так, чтобы они занимали всю высоту и ширину области просмотра. Затем классу .full-screen-divприсваивается высота 100vh(высота области просмотра) и ширина 100vw(ширина области просмотра). убедитесь, что он занимает весь экран.

Метод 2. Абсолютное позиционирование

.full-screen-div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Этот метод позиционирует элемент .full-screen-divабсолютно относительно его ближайшего позиционированного предка или элемента . Установка для top, left, rightи bottomзначения 0гарантирует расширение элемента div. чтобы заполнить весь экран.

Метод 3: JavaScript

const divElement = document.querySelector('.full-screen-div');
divElement.style.height = window.innerHeight + 'px';
divElement.style.width = window.innerWidth + 'px';

В этом методе JavaScript используется для установки высоты и ширины элемента в соответствии с высотой и шириной области просмотра с использованием свойств window.innerHeightи window.innerWidth.