Je voudrais faire un div qui couvre toute la page. Je mets un style css avec hauteur: 100% mais cela ne couvre que la zone visible. Je veux aussi couvrir la zone quand je défile vers le bas.Faire un div qui couvre toute la page
Utilisez position:fixed cette façon, votre div restera sur toute la zone visible en permanence ..
donner votre div une classe overlay et créer 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;
}
html, body { height: 100%; }
#page { min-height: 100% }
Je ne suis pas sûr de ce que vous faites avec cette div, mais vous pouvez aussi styliser l'élément.
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
}
#test {
position:absolute;
display:block;
background:#ccc;
height:100%;
width:100%;
}
</style>
+1 pour la remise à zéro du corps. – cbednarski
cela ne fonctionnera pas .. 'position: absolute' avec 100% de largeur et de hauteur ne fera que s'adapter à la fenêtre. si vous faites défiler, il va défiler vers le haut et le reste de la page sera sans la superposition .. –
Voici un excellent article sur comment faire exactement cela ...
http://james.padolsey.com/javascript/get-document-height-cross-browser/
Après css fera le travail nécessaire. Parfois, nous voulons couvrir le corps de la page avec une superposition jusqu'à ce que toutes les ressources de la page Web ne soient pas complètement téléchargées. Et ils nous disparaissent cette superposition pour montrer le contenu complet de notre page Web. exemple suivant est une petite modification des réponses ci-dessus, dans cet exemple, nous montrons un revêtement couvrant tout le corps de la page avec animation CSS3:
Pour plus d'animations, visitez Here
$(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>
Voici un bon article sur la façon de le faire ... http://james.padolsey.com/javascript/get-document-height-cross-browser/ – exoboy
Vérifiez ma solution ci-dessous. A moins d'avoir mal compris votre question, les autres solutions ne vous indiqueront que les dimensions de la fenêtre d'affichage (fenêtre), et non les dimensions du document ... – exoboy
Les solutions CSS ne fonctionneront pas pour ce problème, vous aurez besoin d'un peu de javascript. – exoboy