Блок на весь экран | CSS
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as ‘0’ (for ‘min-height’) or ‘none’ (for ‘max-height’). [w3.org]
html, body < height: 100%; margin: 0; padding: 0; overflow: hidden; >body < overflow: auto; /* добавить полосу прокрутки */ > main
Блок шириной на весь экран монитора выровнять по центру окна браузера
У многих сайтов, в том числе у «Шпаргалки блоггера» содержание ограничено определённой шириной и горизонтально выравнивается по середине экрана.
header, nav, main, footer
Для того, чтобы контент выходил за пределы этих 1200px , но был ограничен шириной окна браузера, достаточно такого кода:
Картинка на весь экран CSS
Особенно здорово смотрятся изображения. Они занимают необходимое им пространство, но не более ширины окна браузера.
Код немного доработан, опираясь на статью «Размер изображения меняется при изменении экрана браузера». Там же написан соответствующий вариант для видео.
7 комментариев:
Agent_Smith Полезная штука, спасибо Вам) NMitra Для себя делала :)) Другие прописывают max-width для каждого отдельного тега (p, pre и т.п.), а не для всей колонки main. Анонимный С высотой блока не работает. просто по ширине экрана, ниже обрезается и никуда не скролится NMitra Ничего не поняла 🙂 Приведите пример, пожалуйста. Анонимный о Иван Сафронов не работает данный метод NMitra Так не может быть: на данной странице ведь работает. Покажите URL, где внедрён код и поясните что именно хотите сделать. Например, блок с заголовком «Популярное».
Как сделать DIV на весь экран, перекрывающий всю страницу, с помощью CSS
К поиску ответа на вопрос «Как сделать DIV на весь экран, перекрывающий всю страницу, с помощью CSS» обычно обращаются в двух случаях. Во-первых, чтобы соблюсти требование закона и скрыть контент от пользователей не доросших для его просмотра. Во-вторых для того, чтобы оградить контент своего сайта от копирования. В данной статье рассмотрим то, как создать такой div , который перекрывает всю страницу и которым можно спрятать весь контент, а можно просто его уберечь от простого копирования. Но всё это конечно легко обходится, поэтому для себя я озадачился этим вопросом только для того, чтобы соблюсти закон на части своих страниц одного проекта (где про алкоголь и сигареты — иначе Google AdSense ругается).
Рабочий пример css-кода с блокирующим весь экран div (на всю ширину и всю высоту экрана)
Сразу приведу готовый код страницы с блокирующим весь экран div , который занимает всю ширину и всю высоту экрана (при условии, что у тега не переопределены высота и ширина, так как div наследует высоту и ширину от body , в котором он располагается):
Пример DIV, перекрывающего весь экран .content-blocker тут контент страницы Где разместить и как обозначить div , блокирующий всю ширину и высоту экрана
Сам div можно вставить в любое место в коде страницы только так, чтобы он был вложен только в
. Это может потребоваться для того, чтобы запутать пользователя, желающего обойти этот div и всё-таки добраться до контента страницы, но это будет наверняка тщетно — все современные браузеры идут в комплекте с инструментами разработчика и всё это быстро находится и обходится. Поэтому проще вставить этот div перед закрывающим тегом или сразу после — там ему самое место.Для того, чтобы было проще управлять стилями этого div , зададим ему класс content-blocker (см. стр.19):
Можно наполнить его содержимым, но это уже в зависимости от поставленной задачи.
CSS-стили div’а, расположенного на всю ширину и высоту экрана
Ну и собственно нужно прописать стили, которые растянут этот div на 100% ширины и 100% высоты экрана, поместят его поверх всех элементов страницы и не дадут ему сдвинутся с места. Стили нужно задать в контейнере head:
.content-blocker Итак свойства по порядку и то, что они делают:
- Свойство position: fixed; — нужно для того, чтобы даже при скроллинге длинных страниц наш div жёстко занимал свою позицию и перекрывал весь контент.
- Свойства top: 0; и left: 0; — задают координаты начала div, даже если у тега они были перееопределены, а такое случается достаточно часто.
- Свойства width: 100%; и height: 100%; — наследуют 100% ширины и 100% высоты контейнера . Можно конечно задать в абсолютных значениях километровые размеры, но зачем, если весь контент на правильно свёрстанных сайтах выводится в те размеры, которые занимает , а то, что не попадает в эти размеры, обычно находится вне зоны видимости и не видно пользователю?
- Свойство background-color: rgba(136, 136, 204, 0.5); — требуется задать, если нужно перекрыть пользователю просмотр (тогда прозрачность должна быть либо вообще не задана, либо равняться 1 ). Если это свойство не задать, div будет прозрачным: всё будет видно, но скопировать что-либо со страницы будет невозможно без вмешательства с помощью инструментов разработчика браузера (которые включаются в два клика, и одной кнопкой удаляют этот div — это к тому, что так защищают контент только от совсем ничего не умеющих и ничего не знающих пользователей, которые вряд ли что-то будут копировать и тиражировать с сайта).
- Свойство z-index: 4444; — это для того, чтобы поднять div над всеми слоями. Если что-то будет всё-равно торчать, просто нужно посмотреть z-index торчащего элемента и выставить ещё больший z-index для нашего div .
Выводы:
Так можно просто и быстро создать перекрывающий всю страницу div , который надёжно спрячет контент во исполнение законов, но вряд ли защитит от тех, кто ворует контент. Всё, что опубликовано в интернете и отображается в браузере, можно с теми или иными усилиями утащить, уж поверьте. И чем сложнее навороты, тем сложнее обслуживать сайт, так что борьба с воровством контента в плане его защиты от копирования, — заранее проигрышная тема.
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! 😉
Как заверстать блок во всю ширину окна внутри блока с произвольной шириной
Пока переделывал блог, захотелось, чтобы посреди поста можно было ворваться с каким-нибудь блоком во всю ширину окна. Например, вот так:
Ширина основной колонки с контентом при этом абсолютно произвольная и может меняться в зависимости от размеров окна, настроения браузера и фазы луны. Единственное, что про нее достоверно известно — она выровнена по центру:
Самый очевидный способ — прервать блок с контентом, сделать блок без маржинов, затем продолжить контент:
Проблема в том, что посты удобно писать маркдауном, а в маркдауне от такого способа получается адская каша, за которой сложно следить:
div class="text-content">
# Пост!
Бла бла бла-бла бла. Бла бла? Бла бла-бла.
. бла блабла:
div>
div class="fullwidth">
div>
div class="text-content">
Бла блаааа бла бла-бла.
div>А хочется вот так:
# Пост!
Бла бла бла-бла бла. Бла бла? Бла бла-бла.
. бла блабла:
div class="fullwidth">
div>
Бла блаааа бла бла-бла. Окей, вставляем блок в контент и даем ему width: 100vw :
Теперь его надо сдвинуть к левому краю окна. Расстояние неизвестно, но у нас есть ширина блока с контентом ( 100% ) и ширина окна ( 100vw ). Сначала двигаем блок направо с помощью margin-left: 50% :
Теперь блок начинается ровно с середины окна. Отнимаем 50vw , чтобы блок уехал к левому краю. Получается margin-left: calc(50% — 50vw) , блок встает на нужное место:
Стиль блока выглядит так:
.fullwidth
width: 100vw;
margin-left: calc(50% - 50vw);
>Класс, то что надо.
. или нет? А это что за хрень?
Горизонтальный скролл, блин, откуда?
Оказывается, ширина вертикального скроллбара включается в ширину вьюпорта, то есть 100vw — это больше, чем нам нужно, и появляется горизонтальный скролл. Не представляю, зачем это сделано именно так, не могу придумать случая, когда это было бы полезным.
А счастье было так близко. Окей, время костылей. Гуглением находится один приемлемый костыль: засунуть в скрипт, который будет класть в css-переменную 1vw здорового человека (то есть без учета ширины скроллбара) и пересчитывать его при ресайзах:
script>
(function ()
function setVw()
const vw = document.documentElement.clientWidth / 100;
document.documentElement.style.setProperty('--vw', `$vw>px`);
>
setVw();
window.addEventListener('resize', setVw);
>()); script>Теперь у нас есть переменная var(—vw) , в которой лежит нужное нам количество пикселей. Но по старой традиции лучше использовать ее с фоллбеком на обычный 1vw , вот так: var(—vw, 1vw) .
В результате стиль блока превращается в.
.fullwidth
width: calc(100 * var(--vw, 1vw));
margin-left: calc(50% - 50 * var(--vw, 1vw));
>Препроцессоры немного сглаживают эту жесть. Я себе сделал переменную $vw: var(—vw, 1vw) , мой стиль теперь выглядит как-то так:
.fullwidth
width: calc(100 * $vw)
margin-left: calc(50% - (50 * $vw))P.S. Скроллбары на маке
Если вы верстаете на маке, рекомендую включить в настройках системы постоянное отображение скроллбаров: сразу будут видны косяки с горизонтальным (а иногда и с вертикальным) скроллом.
Подавляющее большинство ваших пользователей на винде, где скроллбары всегда видны. Будьте чуть ближе к ним.
Как растянуть контейнер на всю ширину css
Есть несколько способов как сделать так, чтобы нужный блок занимал всю ширину видимой части браузера( viewport ), или родительского блока. Если необходимо чтобы элемент занял всю ширину родительского элемента (который в свою очередь может быть задан в px или rem), то нужно просто указать:
.example width: 100%; > Если необходимо что бы элемент занимал всю ширину видимой части браузера, то необходимо выставить:
.example width: 100vw; /* И по аналогии с высотой, если требуется */ height: 100vh; >