Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Как сделать DIV на весь экран, перекрывающий всю страницу, с помощью CSS

К поиску ответа на вопрос «Как сделать 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, который надёжно спрячет контент во исполнение законов, но вряд ли защитит от тех, кто ворует контент. Всё, что опубликовано в интернете и отображается в браузере, можно с теми или иными усилиями утащить, уж поверьте. И чем сложнее навороты, тем сложнее обслуживать сайт, так что борьба с воровством контента в плане его защиты от копирования, — заранее проигрышная тема.

Заберите ссылку на статью к себе, чтобы потом легко её найти ;)

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )