Таким образом, у меня есть проблема, что я думаю, довольно распространено, но я должен все же найти хорошее решение для. Я хочу заставить отделение наложения покрыть страницу ENTIRE... НЕ только область просмотра. Я не понимаю, почему это настолько трудно сделать... Я попытался установить тело, высоты HTML к 100% и т.д., но это не работает. Вот то, что я имею до сих пор:
<html>
<head>
<style type="text/css">
.OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
body { height: 100%; }
html { height: 100%; }
</style>
</head>
<body>
<div style="height: 100%; width: 100%; position: relative;">
<div style="height: 100px; width: 300px; background-color: Red;">
</div>
<div style="height: 230px; width: 9000px; background-color: Green;">
</div>
<div style="height: 900px; width: 200px; background-color: Blue;"></div>
<div class="OverLay">TestTest!</div>
</div>
</body>
</html>
Я также был бы открыт для решения в JavaScript, если Вы существуете, но я очень просто использовал бы некоторый простой CSS.
Область просмотра - это все, что имеет значение, но вы, вероятно, хотите, чтобы весь веб-сайт оставался затемненным даже при прокрутке. Для этого вы хотите использовать position: fixed
вместо position: absolute
. Фиксированный элемент будет оставаться статичным на экране при прокрутке, создавая впечатление, что все тело затемнено.
Пример: http://jsbin.com/okabo3/edit
div.fadeMe {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
<body>
<div class="fadeMe"></div>
<p>A bunch of content here...</p>
</body>
Прежде всего, я думаю, вы неправильно понимаете, что такое область просмотра. Область просмотра - это область, которую браузер использует для отображения веб-страниц, и вы никоим образом не можете строить свои веб-сайты так, чтобы каким-либо образом перекрывать эту область.
Во-вторых, похоже, что причина того, что ваш overlay-div не охватывает весь viewport, заключается в том, что вы должны убрать все поля в BODY и HTML.
Попробуйте добавить это в начало вашей таблицы стилей - это сбросит все поля и отступы для всех элементов. Это облегчает дальнейшую разработку:
* { margin: 0; padding: 0; }
Редактировать:
Я только что лучше понял ваш вопрос. Position: fixed;
возможно, вам подойдет, как написал Джонатан Сэмпсон.