Me gustaría hacer un div que cubra toda la página. Puse un estilo CSS con altura: 100% pero esto cubre solo el área visible. Quiero que también cubra el área cuando me desplazo hacia abajo.Haciendo un div que cubre toda la página
Uso position:fixed esta manera su div permanecerá por toda el área visible de forma continua ..
dar a su div una clase overlay y crear la siguiente regla CSS en su
.overlay{
opacity:0.8;
background-color:#ccc;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:1000;
}
Demostración: http://www.jsfiddle.net/TtL7R/1/
html, body { height: 100%; }
#page { min-height: 100% }
No estoy seguro de lo que está haciendo con este div, pero también puede darle estilo al elemento.
<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 para poner a cero el cuerpo. – cbednarski
esto no funcionará .. 'position: absolute' con 100% de ancho y alto solo se ajustará a la ventana gráfica. si se desplaza, se desplazará hacia arriba y el resto de la página estará sin la superposición. –
Aquí hay un excelente artículo sobre cómo hacer precisamente eso ...
http://james.padolsey.com/javascript/get-document-height-cross-browser/
Siguiendo css va a hacer el trabajo requerido.
.overlay {
background: #fff;
position: fixed;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
A veces Queremos cubrir el cuerpo de la página con una superposición hasta que no se descarguen por completo todos los recursos de la página web. Y ellos desvanecen esta superposición para mostrar el contenido completo de nuestra página web. Siguiendo el ejemplo es una pequeña modificación de las respuestas anteriores, en este ejemplo se muestra una superposición que cubre todo el cuerpo de la página con la animación CSS3:
Para más animaciones, visita 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>
Aquí es un gran artículo sobre cómo hacer precisamente eso ... http://james.padolsey.com/javascript/get-document-height-cross-browser/ – exoboy
Compruebe mi solución a continuación. A menos que malinterprete su pregunta, las otras soluciones solo le indicarán las dimensiones de la ventana (ventana), y no las dimensiones del documento ... – exoboy
Las soluciones CSS no funcionarán para este problema, necesitará un poco de javascript. – exoboy