Сделать Div оверлеем ВСЕЙ страницы (не только видового экрана)? - PullRequest
Новая
       11

Сделать Div оверлеем ВСЕЙ страницы (не только видового экрана)?

84 голосов
/ 17 мая 2010

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

Ответы [ 4 ]

203 голосов
/ 17 мая 2010

Окно просмотра - это все, что имеет значение, но вы, вероятно, хотите, чтобы весь сайт оставался затемненным даже при прокрутке. Для этого вы хотите использовать 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>
12 голосов
/ 14 ноября 2012 
body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}
1 голос
/ 18 мая 2010

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

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

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

* { margin: 0; padding: 0; }

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

0 голосов
/ 06 июня 2015

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

html {background-color: grey}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...