Faire un div qui couvre toute la page

Je voudrais faire un div qui couvre la page entière. Je mets un style CSS avec hauteur: 100% mais cela ne couvre que la zone visible. Je veux qu’il couvre également la zone lorsque je fais défiler vers le bas.

Utilisez la position:fixed cette façon, votre div restra sur toute la zone visible en continu.

Donnez à votre div une overlay classe et créez la règle suivante dans votre CSS

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

Démo: http://www.jsfiddle.net/TtL7R/1/

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

Après css fera le travail requirejs.

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

Parfois, nous voulons couvrir le corps de la page avec une incrustation jusqu’à ce que toutes les ressources de la page Web ne soient pas complètement téléchargées. Et ils ont fait disparaître cette superposition pour afficher le contenu complet de notre page Web. L’exemple suivant est une petite modification des réponses ci-dessus. Dans cet exemple, nous montrons une superposition couvrant le corps entier de la page avec l’animation css3:

Pour plus d’animations, visitez ici

 $(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); } } 
  

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,

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,

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,

Voici un excellent article sur la façon de faire cela …

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

Je ne suis pas sûr de ce que vous faites avec cette div, mais vous pouvez également personnaliser l’élément.