Сделать наложение Div на всю страницу (а не только на область просмотра)?

97

Итак, у меня есть проблема, которая, как мне кажется, довольно распространена, но мне еще предстоит найти хорошее решение. Я хочу, чтобы оверлейный div покрывал ВСЮ страницу ... НЕ только область просмотра. Я не понимаю, почему это так сложно сделать ... Я пробовал установить body, html heights на 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.

html css Полярис878
источник
Подробнее см. Здесь: stackoverflow.com/questions/1938536/…
Марко Демайо
Можно ли это сделать с помощью jQuery?
Уильям Энтрикен,

Ответы:

228

Область просмотра - это все, что имеет значение, но вы, вероятно, хотите, чтобы весь веб-сайт оставался затемненным даже при прокрутке. Для этого вы хотите использовать 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>
Сампсон
источник
3
Я могу ошибаться, но будет ли работать фиксированная позиция в IE6 ?! Я знаю, что, наверное, никого больше не волнует IE6.
Марко Демайо
29
@ Марко: Не уверен. Честно говоря, если поддержка браузера 10-летней давности явно не запрашивается, я больше не буду беспокоиться :)
Сэмпсон
5
Так как вы, ребята, делаете это на мобильных устройствах? bradfrostweb.com/blog/mobile/fixed-position
Борис Окунский,
3
+1 Спасибо! Я расширил ваш пример, добавив всплывающее окно над оверлеем: jsbin.com/okabo3/740
kol
проблема, с которой я столкнулся с этим (который используется многими плагинами), заключается в том, что когда вы щелкаете <select>элемент в iOS, он перемещает все окно просмотра и в основном все ломает. неподвижные элементы перемещаются, то , что не следует прокрутки прокрутки и т.д.
billynoah
16 
body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}
Нейт Барр
источник
2
Лучшее возможное решение. Вы просто переключаете "наложенный" класс для тела и применяете стиль выше к телу с этим className.
Святослав Залищук
3
Пожалуйста, объясните этот ответ подробнее. Я не понимаю комментария Святослава.
Lonnie Best
1

Прежде всего, я думаю, вы неправильно поняли, что такое область просмотра. Область просмотра - это область, которую браузер использует для отображения веб-страниц, и вы никоим образом не можете создавать свои веб-сайты, чтобы каким-либо образом переопределить эту область.

Во-вторых, похоже, что причина того, что ваш оверлей-div не покрывает всю область просмотра, заключается в том, что вам нужно удалить все поля на BODY и HTML.

Попробуйте добавить его вверху таблицы стилей - он сбрасывает все поля и отступы для всех элементов. Облегчает дальнейшую разработку:

* { margin: 0; padding: 0; }

Изменить: я просто лучше понял ваш вопрос. Position: fixed; вероятно, сработает для вас, как написал Джонатан Сэмпсон.

Арве Систад
источник
1
Не следует удалять отступы и поля со всего . Было бы очень сложно вернуть их для многих элементов, таких как кнопки и входные данные формы.
Сэмпсон
1
На мой взгляд, это действительно простой способ относиться ко всему одинаково во всех браузерах. Возможно, сегодня не так много, как раньше, при адаптации к IE5, но я по-прежнему делаю это одним из первых, что пишу в таблице стилей.
Арве Систад
3
@Arve Это приближает вас, но лучше вместо этого использовать проверенный временем лист сброса. Посетите meyerweb.com/eric/tools/css/reset для получения дополнительной информации - вам это понравится, уверяю вас :)
Сэмпсон
Я видел это, и я просто думаю, что он слишком большой :)
Арве Систад
1
@Arve Сбросы не такие уж большие - попробуйте полностью восстановиться, *{}и вы увидите намного больше :)
Сэмпсон
0

У меня было немало проблем, так как я не хотел ИСПРАВЛЯТЬ оверлей на месте, так как я хотел, чтобы информация внутри наложения была прокручиваемой по тексту. Я использовал:

<html style="height=100%">
   <body style="position:relative">
      <div id="my-awesome-overlay" 
           style="position:absolute; 
                  height:100%; 
                  width:100%; 
                  display: block">
           [epic content here]
      </div>
   </body>
</html>

Конечно, для div посередине нужен контент и, возможно, прозрачный серый фон, но я уверен, что вы уловили суть!

Бенджамин Воган
источник
-6

Я посмотрел на ответ Нейта Барра выше, который, похоже, вам понравился. Это не сильно отличается от более простого

html {background-color: grey}
Джастин Манс
источник