Как сделать сайт на весь экран в 2026: готовый CSS и промпты

Сайт на весь экран можно сделать в пяти вариантах: первый экран во всю высоту окна, контент без белых полей по бокам, картинка или видео на всю площадь, презентация с секциями по одному экрану или запуск страницы в полноэкранном режиме браузера. Для первых четырёх случаев хватает нескольких строк CSS, а полноэкранному режиму браузера нужна ещё строка JavaScript с requestFullscreen(). Для каждого случая в статье есть готовый код и промпт для ИИ, а в конце разобраны частые ошибки: обрезанный контент, горизонтальная прокрутка, кнопка под панелью браузера на телефоне.

Пять разных задач за одной фразой

У каждой из пяти задач свой набор свойств CSS: правка не того блока ничего не даст. Сначала определите, какой эффект вам нужен.

• Первый экран (хиро) во всю высоту окна: заголовок и кнопка видны без прокрутки.
• Контент растянут по всей ширине, без белых полей слева и справа.
• Картинка или видео заполняет экран целиком, без искажений и пустых углов.
• Презентация: каждая секция ровно на экран, прокрутка перелистывает их по одной.
• Полноэкранный режим браузера: страница на весь монитор, без адресной строки и вкладок.

Первый экран во всю высоту: 100vh и почему нужен 100dvh

Первый экран растягивают по высоте через min-height: блок занимает как минимум высоту окна и может вырасти под содержимое. Высоту задают в единицах vh, где 100vh соответствует всей высоте окна. Минимальный рабочий набор: .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }

У блока с фиксированной height по умолчанию действует overflow: visible: длинный текст выходит за границы и может наехать на следующую секцию. С overflow: hidden, который часто встречается у хиро в шаблонах, содержимое обрезается. В результате кнопка внизу может оказаться перекрыта или скрыта. С min-height блок просто вырастет.

На телефонах 100vh считается по «большому» состоянию окна, когда адресная строка и нижняя панель скрыты: vh соответствует lvh. Пока панели видны, низ блока с кнопкой уходит под них. Когда панели появляются и прячутся, 100vh не меняется. Для разных состояний окна есть отдельные единицы: svh для окна с видимыми панелями, lvh для окна без панелей и dvh, которая пересчитывается на ходу.

• Блок высотой 100svh помещается в окно даже с видимыми панелями браузера. Это предсказуемый вариант для хиро с кнопкой. Если содержимого больше, min-height даст блоку вырасти.
• 100dvh пересчитывается при появлении панелей: смотрится органично, но блок слегка «дышит» при прокрутке.
• 100lvh задаёт высоту без панелей; часть содержимого при видимых панелях уедет за экран.

Единицы dvh, svh и lvh работают в Chrome и Edge с версии 108, в Firefox с 101, в Safari (в том числе на iPhone) с 15.4. Такие браузеры на 07.10.2026 стоят примерно у 96% пользователей (caniuse). Для старых версий пишут две строки подряд: сначала vh, потом svh.

1. Выделите первый экран в блок: <section class="hero">заголовок, подзаголовок, кнопка</section>.
2. Задайте высоту с запасом: .hero { min-height: 100vh; min-height: 100svh; }, браузер применит ту строку, которую понимает.
3. Отцентрируйте содержимое: display: flex; flex-direction: column; justify-content: center; align-items: center;
4. Уберите отступ страницы: body { margin: 0; }, иначе по краям останется белая рамка.
5. Проверьте на телефоне: пролистайте вверх-вниз и поверните экран горизонтально, кнопка не должна уходить под панель браузера.

Это весь первый экран целиком, с фоновым фото, заголовком и кнопкой.

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
  body { margin: 0; }
  .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; }
  .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-text { position: relative; padding: 20px; color: #fff; background: rgba(0, 0, 0, .45); }
  .hero-text a { color: #fff; }
</style>
<section class="hero">
  <img src="cover.jpg" alt="">
  <div class="hero-text">
    <h1>Заголовок</h1>
    <a href="#form">Записаться</a>
  </div>
</section>

Строка <meta name="viewport"> нужна, чтобы телефон считал ширину по своему экрану; без неё мобильный браузер рисует страницу в широком виртуальном окне и уменьшает её. Первые две строки нужны, если вы сохраняете пример отдельным файлом: без <!doctype html> браузер включает режим совместимости со старыми сайтами, а без <meta charset="utf-8"> кириллица в заголовке может превратиться в набор случайных символов.

Контент во всю ширину, без белых полей по бокам

Чаще всего поля по краям берутся из трёх мест: отступ страницы (margin у body), ограничение ширины контейнера (max-width) и внутренние отступы (padding). В готовых шаблонах чаще виноват контейнер, найти его можно кликом правой кнопкой по пустому полю и «Просмотреть код».

• body { margin: 0; } убирает стандартный отступ, из-за которого фон не доходит до краёв.
• Контейнер .container { max-width: 1200px; margin-inline: auto; padding-inline: 20px; } удерживает текст: он не растягивается через весь монитор и не липнет к краям на телефоне.
• Секция «во всю ширину» собирается так: фон и картинка у самой секции (width: 100%), а внутри контейнер с текстом. Фон уходит до краёв, читать удобно.
• width: 100vw для таких блоков лучше не использовать: эта единица включает ширину полосы прокрутки, и появляются лишние пиксели по горизонтали. Достаточно width: 100%.

Растягивать во всю ширину стоит фоны, обложки, видео и сетки карточек, а сам текст держать в контейнере: строки в 200 символов глаз теряет. В HTML и CSS можно разобраться без заучивания, если понимать, как правила стилей влияют на элементы страницы.

По теме: Полноэкранный режим сайта: кнопка, выход и проверка

Картинка или видео на весь экран

Картинку или видео в тегах img и video растягивают через object-fit. Если изображение служит фоном блока, работают свойства background.

У хиро с одной только min-height правило height: 100% у обычной картинки превращается в auto: процентной высоте нужна явно заданная высота родителя. Поэтому картинка не заполнит такой блок по высоте. Задайте секции .hero { position: relative; }, а картинке .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }. Блоку с текстом поверх задайте position: relative;, чтобы он лёг выше картинки.

Значение object-fit: cover заполняет область картинкой, обрезает лишнее и сохраняет пропорции. Значение contain, наоборот, впишет кадр целиком и оставит пустые поля. Свойство object-position: center; решает, какая часть кадра останется видимой при обрезке. Для портретов часто нужен object-position: top, иначе лица уезжают вниз.

Для видео укажите файл в атрибуте src: <video src="hero.mp4" autoplay muted loop playsinline poster="cover.jpg"></video>. Задайте ролику то же абсолютное позиционирование, inset: 0;, width: 100%;, height: 100%; и object-fit: cover;, что у картинки. Секция должна иметь position: relative;, а блок с текстом поверх видео тоже получает position: relative;.

Для фонового видео оставьте muted: Chrome разрешает автозапуск без звука, а при включённом звуке запуск без действий человека может быть заблокирован.

На iPhone атрибут playsinline оставляет видео внутри страницы. Без него iPhone развернёт ролик в полноэкранном плеере вместо фона. Атрибут muted позволяет запустить видео без звука и без нажатия на кнопку воспроизведения.

Фон секции задают так: .hero { background-image: url('bg.jpg'); background-size: cover; background-position: center; }. В качестве фона сайта можно использовать и градиент, и видео.

Текст поверх фото надёжнее всего читается с подложкой: полупрозрачный слой (background: rgba(0, 0, 0, .45)) и уже на него текст.

Полноэкранное видео утяжеляет страницу. Держите файл в пределах нескольких сотен килобайт, ставьте poster с картинкой-заглушкой, а на мобильных нередко разумнее показать статичный кадр вместо видео.

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

Презентация: секции по одному экрану

Секции презентации делают не меньше экрана через min-height, а CSS-механизм scroll-snap притягивает прокрутку к ближайшей секции. С длинным текстом секция вырастет выше экрана. Раньше такой эффект делали внешними библиотеками, сейчас достаточно CSS. Каркас из двух правил: html { scroll-snap-type: y mandatory; scroll-behavior: smooth; } и для каждой секции .slide { min-height: 100dvh; scroll-snap-align: start; }

Механизм scroll-snap работает в Chrome с версии 69, Firefox с 68 и Safari с 11; scroll-snap-type задаёт притягивание прокрутки. Скрипты для такой прокрутки не нужны.

• Значение mandatory притягивает жёстко: секцию выше экрана будет неудобно дочитать. Для разделов с длинным текстом берите proximity.
• Секциям с текстом тоже задавайте min-height: блок вырастет под содержимое, и длинный текст не наедет на соседний слайд.
• Быстрый свайп по умолчанию может пролететь несколько секций. Чтобы прокрутка останавливалась на каждой, задайте секциям scroll-snap-stop: always. Свойство доступно в основных браузерах с июля 2022 года.
• Оставьте выход: меню с якорями, чтобы попасть в нужный раздел, не пролистывая все экраны.
• Если внутри секции есть своя прокрутка (список, карта), проверьте её на телефоне: она конфликтует с притягиванием.

По теме: Как сделать шаблон сайта: HTML, CSS и повторные компоненты

Полноэкранный режим браузера: Fullscreen API

Полноэкранный режим разворачивает страницу на весь монитор: адресной строки и вкладок не видно, как у видеоплеера. Посетитель включает его сам клавишей F11 в Windows или сочетанием Control + Command + F в Safari на Mac. Кнопкой на странице это делает Fullscreen API: по клику вызывается document.documentElement.requestFullscreen(), для выхода вызывается document.exitFullscreen().

• Запрос сработает только в ответ на действие человека (клик или нажатие клавиши), развернуть страницу самостоятельно при загрузке нельзя (MDN про requestFullscreen()).
• На iPhone requestFullscreen() для обычных элементов не работает. Частичная поддержка есть только на iPad: поверх содержимого появляется кнопка, которую нельзя отключить, а свайп вниз выходит из режима. На iPhone кнопка «Во весь экран» для галереи или презентации не сработает, поэтому она не должна быть единственным способом посмотреть контент. В десктопном Safari полная поддержка появилась в версии 16.4, в старых сборках метод назывался webkitRequestFullscreen.
• Можно развернуть отдельный элемент: метод вызывается у нужного блока, например у контейнера с галереей.
• Режим уместен для презентаций, игр, галерей и экранов в офисе. Обычному лендингу он скорее вредит: человек теряет привычную навигацию браузера.

Как попросить это у ИИ вместо ручной вёрстки

Попросите ИИ изменить конкретный блок и назовите нужные свойства CSS. В Claude или ChatGPT можно отправить такие просьбы:

• «Сделай первый экран на всю высоту окна: min-height 100svh с фолбэком на 100vh, содержимое по центру. Кнопка не должна уходить под панель браузера на телефоне.»
• «Убери белые поля по бокам: обнули margin у body, секции сделай во всю ширину, текст оставь в контейнере max-width 1200px с отступами 20px. Горизонтальной прокрутки быть не должно.»
• «Поставь фоновое фото на первый экран через object-fit: cover и добавь тёмный полупрозрачный слой, чтобы белый заголовок читался.»
• «Собери презентацию: пять секций по одному экрану, прокрутка притягивается через scroll-snap, добавь scroll-snap-stop: always, чтобы быстрый свайп не пролетал секции, сверху меню с якорями.»
• «Добавь кнопку «Во весь экран»: по клику вызывай requestFullscreen у контейнера галереи, при выходе меняй подпись обратно.»

Просите по одной правке за раз и смотрите результат в браузере: так понятно, что именно сломалось. Весь путь от описания страницы до публикации показан на примере сайта на HTML.

По теме: Как сделать прокрутку сайта в 2026: якоря, кнопка наверх, анимации

Частые ошибки

Горизонтальная прокрутка появляется из-за 100vw или элемента с жёсткой шириной больше экрана. Найти его помогает временное правило * { outline: 1px solid red; }: сразу видно, что выходит за край.

Контент вылезает за секцию или обрезается. Обычно виновата фиксированная height: 100vh: длинный текст наезжает на следующий блок, а при overflow: hidden обрезается вместе с кнопкой внизу. Меняйте height на min-height.

Кнопка уходит под панель браузера на телефоне. Так бывает с 100vh: его высота считается по окну без панелей, поэтому при видимой адресной строке низ блока скрыт. Поможет svh. Если блок прыгает при прокрутке, проверьте dvh: эта единица меняется вместе с панелями. Для хиро с кнопкой берите svh.

Светлый текст на фото исчезает на светлом участке кадра. Нужна подложка или затемнение.

Первый экран слишком долго загружается. Фото шириной 4000 пикселей и видео на десятки мегабайт превращают эффектный хиро в белый экран на мобильном интернете.

Макет собран только под монитор. На ширине 390 пикселей полноэкранная секция сжимается в кашу. Перед публикацией пройдитесь по проверкам мобильной версии.

Частые вопросы

Чем 100dvh отличается от 100vh?

На мобильных vh считается по окну со скрытыми панелями браузера, поэтому часть блока прячется за нижним краем. Единица dvh пересчитывается, когда панели появляются и исчезают, а svh всегда берёт минимальное состояние окна. Для хиро с кнопкой безопаснее svh, для секций-слайдов приятнее dvh.

Почему после «растянуть на весь экран» появилась горизонтальная прокрутка?

Чаще всего из-за width: 100vw: эта единица считает ширину вместе с полосой прокрутки, и блок оказывается шире доступного места. Бывает, что виноват элемент с шириной в пикселях или картинка шире экрана без max-width: 100%. Замените 100vw на 100% и добавьте картинкам max-width: 100%.

Как сделать сайт на весь экран в блочном конструкторе?

Откройте настройки самого блока: у обложек и первых экранов есть выбор высоты (в том числе «на всю высоту экрана»), у секций переключатель ширины контента. Ищите настройки конкретного блока, а не общие настройки страницы.

Можно ли открыть сайт на весь экран без кода?

Да, это умеет сам браузер: F11 в Windows, Control + Command + F в Safari на Mac. На iPhone в Safari при добавлении сайта на экран «Домой» можно включить Open as Web App: сайт откроется как приложение, без адресной строки. На Android всё зависит от сайта: без веб-манифеста с режимом standalone или fullscreen ярлык откроется в обычной вкладке браузера. Включить доступный на устройстве режим посетитель может без кода.

Нужно ли знать CSS, чтобы сделать всё это?

Наизусть свойства знать не обязательно, но полезно понимать смысл трёх: min-height отвечает за высоту, object-fit за поведение картинки внутри блока, max-width за ширину контейнера. Тогда вы точно сформулируете просьбу к ИИ и проверите, что он выполнил её без лишних правок на странице.