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

«Сайт на весь экран» означает одно из пяти: первый экран во всю высоту окна, контент без белых полей по бокам, картинка или видео на всю площадь, презентация с секциями по одному экрану или запуск страницы в полноэкранном режиме браузера. Решение в каждом случае занимает от двух до пяти строк CSS, и они разные. Ниже готовые куски кода, промпты, которыми то же самое просят у ИИ, и разбор ошибок: обрезанный контент, горизонтальная прокрутка, скачущая высота на телефонах.

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

Сначала определите свой случай: свойства CSS в этих задачах не пересекаются, и путаница стоит вечера бесполезных правок.

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

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

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

Здесь важно min-height, а не height: блок с фиксированной height обрежет всё, что не влезло в экран, а с min-height просто вырастет.

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

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

Поддержка не проблема: dvh, svh и lvh работают в Chrome и Edge с версии 108, в Firefox с 101, в Safari (в том числе на iPhone) с 15.4, суммарно около 92% браузеров (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. **Проверьте на телефоне:** пролистайте вверх-вниз и поверните экран горизонтально, кнопка не должна уходить под панель браузера.

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

Поля по краям берутся из трёх мест: отступ страницы (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 без заучивания.

По теме: Как сделать кликабельный сайт в 2026: ссылки, кнопки, телефон

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

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

• .hero img { width: 100%; height: 100%; object-fit: cover; } растянет картинку на весь блок, обрежет лишнее и не исказит пропорции (object-fit на MDN). Значение contain, наоборот, впишет кадр целиком и оставит пустые поля.
• object-position: center; решает, какая часть кадра останется видимой при обрезке. Для портретов часто нужен object-position: top, иначе лица уезжают вниз.
• Видео: <video autoplay muted loop playsinline poster="cover.jpg"></video> плюс те же width, height и object-fit: cover. Без muted и playsinline мобильные браузеры автовоспроизведение не запустят.
• Фон секции: .hero { background-image: url('bg.jpg'); background-size: cover; background-position: center; } Все способы задать фон, включая градиент и видео, собраны в разборе про фон сайта.
• Текст поверх фото читается только с подложкой: полупрозрачный слой (background: rgba(0, 0, 0, .45)) и уже на него текст.

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

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

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

Эффект слайдов, когда прокрутка перелистывает страницу ровно на экран, раньше делали внешними библиотеками. Сейчас достаточно CSS: механизм scroll-snap притягивает прокрутку к ближайшей секции. Каркас из двух правил: 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, свойства описаны в документации MDN. Скрипты для такой прокрутки не нужны.

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

По теме: Разделы сайта: какие нужны и как сделать структуру в 2026

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

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

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

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

Если писать CSS руками не хочется, опишите эффект словами. Формулировки ниже дают предсказуемый результат в инструментах вроде Claude или ChatGPT, потому что называют и задачу, и способ.

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

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

По теме: Как сделать сайт-визитку в 2026: три способа и готовый промпт

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

• **Горизонтальная прокрутка.** Виноват 100vw или элемент с жёсткой шириной больше экрана. Найти помогает временное правило * { outline: 1px solid red; }: сразу видно, что выходит за край.
• **Обрезанный контент.** height: 100vh у секции с текстом отрезает всё лишнее, и до кнопки внизу не добраться. Меняйте на min-height.
• **Скачущая высота на телефоне.** Признак 100vh: панели браузера прячутся, окно вырастает, блок прыгает. Лечится svh или dvh.
• **Нечитаемый текст на фото.** Светлый шрифт на светлом участке кадра исчезает: нужна подложка или затемнение.
• **Слишком тяжёлый первый экран.** Фото шириной 4000 пикселей и видео на десятки мегабайт превращают эффектный хиро в белый экран на мобильном интернете.
• **Макет собран только под монитор.** На ширине 390 пикселей полноэкранная секция сжимается в кашу. Что проверять, показано в статье про мобильный сайт.

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

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

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

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

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

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

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

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

Да, это умеет сам браузер: F11 в Windows, Control + Command + F в Safari на Mac. На телефоне похожий эффект даёт добавление сайта на домашний экран, страница открывается почти без интерфейса браузера. Такой режим включает посетитель, писать ничего не нужно.

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

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