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

Question

Я хотел бы сделать div, который охватывает всю страницу. Я поставил стиль CSS с высотой: 100%, но это касается только видимой области. Я хочу, чтобы он также покрывал область при прокрутке вниз.

Answer 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/

Answer 2

После 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>

Answer 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>

Answer 4

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

Answer 5

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

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

Answer 6

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