Метод 1: высота и ширина CSS

Один простой подход — использовать свойства CSS, чтобы установить высоту и ширину элемента div на 100 %. Это гарантирует, что он займет все доступное пространство внутри родительского контейнера. Вот пример:

<style>
  .full-screen-div {
    height: 100vh;
    width: 100vw;
    background-color: #f1f1f1;
  }
</style>
<div class="full-screen-div">
  <!-- Your content goes here -->
</div>

Установив высоту 100vh(высота области просмотра) и ширину 100vw(ширину области просмотра), элемент div расширится и заполнит всю область экрана.

Метод 2: Flexbox

Flexbox – это мощная модель макета CSS, которая также помогает создавать полноэкранные элементы div. Используя гибкие свойства, вы можете управлять содержимым контейнера, расширяя и заполняя доступное пространство. Вот пример:

центр;
высота: 100vh;
поля: 0;

.full-screen-div {
фоновый цвет: #f1f1f1;

В этом примере мы устанавливаем для элемента body значение display: flexи настраиваем свойства выравнивания и выравнивания, чтобы центрировать содержимое. Если установить высоту тела 100vh, элемент div заполнит весь экран.

Метод 3: расчет JavaScript

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

<script>
  function resizeDiv() {
    const div = document.querySelector('.full-screen-div');
    div.style.height = window.innerHeight + 'px';
    div.style.width = window.innerWidth + 'px';
  }
  window.addEventListener('resize', resizeDiv);
  resizeDiv();
</script>
<div class="full-screen-div">
  <!-- Your content goes here -->
</div>

В этом примере мы определяем функцию resizeDiv, которая регулирует высоту и ширину элемента div в зависимости от текущих размеров области просмотра. Мы прикрепляем прослушиватель событий к событию изменения размера окна, чтобы гарантировать, что элемент div остается полноэкранным при изменении размера окна.