Как сделать div на весь экран: решения на CSS и JavaScript

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для того чтобы div заполнил весь экран, потребуется небольшая корректировка в CSS. Используйте свойство position: fixed; это позволит элементу занять весь экран и установите для каждого его края координату 0. Для выделения вашего элемента повысьте z-index: 100;. Пример синтаксиса такого рода стиля:

CSS

Скопировать код

.fullscreen {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 100;
}

Назначьте класс fullscreen вашему div следующим образом:

HTML

Скопировать код

<div class="fullscreen"></div>

Данный метод не предполагает использование Fullscreen API, однако он вполне может быть достаточен для создания впечатляющего пользовательского интерфейса.

Профессиональные подсказки и трюки для работы в полноэкранном режиме

Хотите сделать ваш div визуальным центром экрана? В этом может помочь API Fullscreen HTML5, которое значительно расширит возможности вашего элемента.

Используйте Fullscreen API

Этот код позволяет открыть перед вами мир полноэкранного отображения — просто нажмите на кнопку, и для вас откроется новый виток возможностей.

Скопировать код

// Функция для переключения между полноэкранным режимом и обычным.
function toggleFullScreen(elem) {
    if (!document.fullscreenElement) {
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
}

// Активация функции при нажатии на кнопку
document.getElementById('myButton').addEventListener('click', function() {
    toggleFullScreen(document.getElementById('myDiv'));
});

Адаптивный дизайн

Обеспечьте корректное отображение div на экранах различных устройств. Помощь в этом может оказать применение CSS медиа запросов и JavaScript, которые позволят адаптировать ваш элемент под изменяющиеся размеры экрана браузера.

Совместимость с браузерами

Не забывайте проверять совместимость с разными браузерах. Вероятнее всего, Fullscreen API будет оптимально работать при использовании HTTPS, а также стоит учесть ряд особенностей на устройствах с Android 4.3 и ранними версиями.

Стилизация

Когда ваш div занимает весь экран, его внешний вид должен быть безупречным. Элементу можно назначить различные стили, например, border, border-radius и padding, чтобы он выглядел эффектно и аккуратно.

Визуализация

Вот пример перехода от простого эскиза к полноэкранному изображению:

CSS

Скопировать код

.fullscreen-div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

Div на весь экран превращает ваш элемент в грандиозное шоу, занимающее всё пространство экрана.

Поглубже: от коспцепции к реализации

Рыцарь в сияющих доспехах

Превратите ваш div в хозяина всего пространства тега <body>. Если ваш div не является непосредственным дочерним элементом <body>, для позиционирования элемента используйте position: absolute.

CSS

Скопировать код

.fullscreen-div {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 100%; height: 100%;
    z-index: 9999;
}

Адаптивность и интерактивность

Ваш div должен быть достаточно гибким, способным изменять свои размеры и приспосабливаться к размерам родительского контейнера при переключении между обычным и полноэкранным режимами. Здесь на помощь придёт JavaScript.

Стили для главных на сцене

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

Выход из полноэкранного режима

Должен быть обеспечен удобный способ выхода из полноэкранного режима, обычно это достигается нажатием клавиши "Esc". Власть в руках пользователя — помните об этом!

Полезные материалы

Fullscreen API – Веб API | MDN — Инструкции и документация по использованию Fullscreen API.
Как создать полноэкранное перекрывающее навигационное меню — Инструкции по созданию полноэкранного навигационного оверлей-меню.
html – Сделать body на 100% высоты браузера – Stack Overflow — Обсуждения и решения задачи по адаптации экранного пространства.
Создание полноэкранных переживаний | Статьи | web.dev — Рекомендации по разработке полноэкранных интерфейсов.
GitHub – sindresorhus/screenfull: Простая обёртка для кроссбраузерного использования JavaScript Fullscreen API — Удобная библиотека для работы с Fullscreen API в различных браузерах.
javascript – onclick переход в полноэкранный режим – Stack Overflow — Обсуждения различных способов активации полноэкранного режима.