Чтобы установить размер элемента
Метод 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.