Создание div, который охватывает всю страницу

Ответ 1

Используйте position:fixed таким образом, чтобы ваш div оставался по всей видимой области непрерывно.

дайте вашему div класс overlay и создайте следующее правило в CSS

.overlay{
    opacity:0.8;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}

Демо: http://www.jsfiddle.net/TtL7R/1/

Ответ 2

html, body { height: 100%; }
#page { min-height: 100% }

Ответ 3

 <style type="text/css">
 html, body {
    margin:0;
    padding:0;
    height:100%; 
 } 
 #test { 
    position:absolute; 
    display:block;
    background:#ccc; 
    height:100%; 
    width:100%;
 }
 </style>

Ответ 4

Следующее css выполнит требуемую работу.

.overlay {
  background: #fff;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

Иногда мы хотим покрыть тело страницы наложением, пока все ресурсы веб-страницы не будут загружены полностью. И они угасают этот оверлей, чтобы показать полный контент нашей веб-страницы. Следующий пример представляет собой небольшую модификацию вышеприведенных ответов. В этом примере мы показываем наложение, покрывающее весь текст страницы с помощью анимации css3:

Для получения дополнительной анимации посетите Здесь

$(window).load(function() {
    $('.overlay').delay(1000).fadeOut(800);
});

.overlay {
  background: #fff;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
}
.loading-bar {
  display: inline-block;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  animation: loading 1s ease-in-out infinite;
}
.loading-bar:nth-child(1) {
  background-color: #3498db;
  animation-delay: 0;
}
.loading-bar:nth-child(2) {
  background-color: #c0392b;
  animation-delay: 0.09s;
}
.loading-bar:nth-child(3) {
  background-color: #f1c40f;
  animation-delay: .18s;
}
.loading-bar:nth-child(4) {
  background-color: #27ae60;
  animation-delay: .27s;
}

@keyframes loading {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 2.2);
  }
  40% {
    transform: scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="overlay">
  <div class="loading">
    <div class="loading-bar"></div>
    <div class="loading-bar"></div>
    <div class="loading-bar"></div>
    <div class="loading-bar"></div>
  </div>
</div>
<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </p>
<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </p>
<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </p>

Ответ 5

Вот отличная статья о том, как это сделать...

http://james.padolsey.com/javascript/get-document-height-cross-browser/

Ответ 6

Я не уверен, что вы делаете с этим div, но вы можете также стилизовать элемент.