К поиску ответа на вопрос «Как сделать DIV на весь экран, перекрывающий всю страницу, с помощью CSS» обычно обращаются в двух случаях. Во-первых, чтобы соблюсти требование закона и скрыть контент от пользователей не доросших для его просмотра. Во-вторых для того, чтобы оградить контент своего сайта от копирования. В данной статье рассмотрим то, как создать такой div, который перекрывает всю страницу и которым можно спрятать весь контент, а можно просто его уберечь от простого копирования. Но всё это конечно легко обходится, поэтому для себя я озадачился этим вопросом только для того, чтобы соблюсти закон на части своих страниц одного проекта (где про алкоголь и сигареты - иначе Google AdSense ругается).
Рабочий пример css-кода с блокирующим весь экран div (на всю ширину и всю высоту экрана)
Сразу приведу готовый код страницы с блокирующим весь экран div, который занимает всю ширину и всю высоту экрана (при условии, что у тега <body> не переопределены высота и ширина, так как div наследует высоту и ширину от body, в котором он располагается):
<!DOCTYPE html>
<html>
<head>
<title>Пример DIV, перекрывающего весь экран</title>
<style>
.content-blocker {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(136, 136, 204, 0.5);
z-index: 4444;
}
</style>
</head>
<body>
тут контент страницы
<div class="content-blocker"></div>
</body>
</html>Где разместить и как обозначить div, блокирующий всю ширину и высоту экрана
Сам div можно вставить в любое место в коде страницы только так, чтобы он был вложен только в <body>. Это может потребоваться для того, чтобы запутать пользователя, желающего обойти этот div и всё-таки добраться до контента страницы, но это будет наверняка тщетно — все современные браузеры идут в комплекте с инструментами разработчика и всё это быстро находится и обходится. Поэтому проще вставить этот div перед закрывающим тегом </body> или сразу после <body> — там ему самое место.
Для того, чтобы было проще управлять стилями этого div, зададим ему класс content-blocker (см. стр.19):
<div class="content-blocker"></div>Можно наполнить его содержимым, но это уже в зависимости от поставленной задачи.
CSS-стили div'а, расположенного на всю ширину и высоту экрана
Ну и собственно нужно прописать стили, которые растянут этот div на 100% ширины и 100% высоты экрана, поместят его поверх всех элементов страницы и не дадут ему сдвинутся с места. Стили нужно задать в контейнере head:
<style>
.content-blocker {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(136, 136, 204, 0.5);
z-index: 4444;
}
</style>Итак свойства по порядку и то, что они делают:
- Свойство
position: fixed;— нужно для того, чтобы даже при скроллинге длинных страниц наш div жёстко занимал свою позицию и перекрывал весь контент. - Свойства
top: 0;иleft: 0;— задают координаты начала div, даже если у тега<body>они были перееопределены, а такое случается достаточно часто. - Свойства
width: 100%;иheight: 100%;— наследуют 100% ширины и 100% высоты контейнера<body>. Можно конечно задать в абсолютных значениях километровые размеры, но зачем, если весь контент на правильно свёрстанных сайтах выводится в те размеры, которые занимает<body>, а то, что не попадает в эти размеры, обычно находится вне зоны видимости и не видно пользователю? - Свойство
background-color: rgba(136, 136, 204, 0.5);— требуется задать, если нужно перекрыть пользователю просмотр (тогда прозрачность должна быть либо вообще не задана, либо равняться1). Если это свойство не задать,divбудет прозрачным: всё будет видно, но скопировать что-либо со страницы будет невозможно без вмешательства с помощью инструментов разработчика браузера (которые включаются в два клика, и одной кнопкой удаляют этотdiv— это к тому, что так защищают контент только от совсем ничего не умеющих и ничего не знающих пользователей, которые вряд ли что-то будут копировать и тиражировать с сайта). - Свойство
z-index: 4444;— это для того, чтобы поднятьdivнад всеми слоями. Если что-то будет всё-равно торчать, просто нужно посмотретьz-indexторчащего элемента и выставить ещё большийz-indexдля нашегоdiv.
Выводы:
Так можно просто и быстро создать перекрывающий всю страницу div, который надёжно спрячет контент во исполнение законов, но вряд ли защитит от тех, кто ворует контент. Всё, что опубликовано в интернете и отображается в браузере, можно с теми или иными усилиями утащить, уж поверьте. И чем сложнее навороты, тем сложнее обслуживать сайт, так что борьба с воровством контента в плане его защиты от копирования, — заранее проигрышная тема.
