html - tamaño - ¿Cómo hacer un div 100% de la altura de la página(no de la pantalla)?
hacer que un div ocupe todo el alto (5)
Intento utilizar CSS para crear un efecto de ''gris'' en mi página mientras se muestra un cuadro de carga en primer plano mientras la aplicación está funcionando. Lo he hecho creando un div negro translúcido de altura / ancho del 100% que tiene su visibilidad activada / desactivada mediante javascript. Pensé que esto sería lo suficientemente simple; sin embargo, cuando el contenido de la página se expande hasta el punto en que se desplaza la pantalla, desplazarse al pie de la página revela una parte que no está atenuada. En otras palabras, el 100% en la altura del div parece aplicarse al tamaño de la ventana del navegador, no al tamaño real de la página. ¿Cómo puedo expandir el div para que abarque todo el contenido de la página? Intenté usar JQuery .css (''height'', ''100%'') antes de alternar su visibilidad, pero esto no cambia nada.
Este es el CSS del div en cuestión:
div.screenMask
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
visibility: hidden;
}
Gracias.
Me doy cuenta de que estoy respondiendo así de largo, mucho después de que me lo pidieron, pero aterricé aquí después de haber sido brevemente desconcertado por este problema, y ninguna de las respuestas actuales es correcta.
Aquí está la respuesta correcta:
body {
position: relative;
}
¡Eso es! Ahora su elemento se colocará en relación con <body> lugar de la ventana gráfica.
No me molestaría con la position: fixed , ya que su compatibilidad con el navegador sigue siendo irregular. Safari anterior a iOS 5 no lo admitía en absoluto.
Tenga en cuenta que su elemento <div> cubrirá el recuadro de borde del <body> (recuadro + relleno + borde), pero no cubrirá su margen. Compense estableciendo posiciones negativas en su <div> (por ejemplo, top: -20px ), o eliminando el margen de <body> .
También recomendaría establecer <body> a la height: 100% para garantizar que nunca termines con una ventana parcialmente enmascarada en una página más corta.
Dos puntos válidos tomados de respuestas anteriores. Como dice Ben Blank, puede perder las declaraciones de width y height , posicionando las cuatro esquinas en su lugar. Y Mercator tiene razón en que debe usar una identificación en lugar de una clase para un elemento tan importante.
Esto deja el siguiente CSS completo recomendado:
body {
position: relative;
margin: 0;
}
#screenMask {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
z-index: 1000;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity=70);
visibility: hidden;
}
Y HTML:
<body>
<div id="screenMask"></div>
</body>
¡Espero que esto ayude a alguien más!
Si cambia de position: absolute a position: fixed , funcionará en todos los navegadores, excepto en IE6. Esto corrige el div a la ventana gráfica, por lo que no se mueve fuera de la vista cuando se desplaza.
Puede usar $(document).height() en jQuery para que funcione también en IE6. P.ej
$(''.screenMask'').height($(document).height());
Eso obviamente lo arreglaría para todos los otros navegadores, pero prefiero no usar JavaScript si puedo evitarlo. Tendría que hacer lo mismo para el ancho también, en realidad, en caso de que haya algún desplazamiento horizontal.
Hay muchos hacks para hacer trabajo de posicionamiento fijo en IE6 también, pero tienden a imponer algunas otras limitaciones en su CSS, o usan JavaScript, por lo que probablemente no valen la pena.
Además, supongo que solo tiene una de estas máscaras, por lo que le sugiero que use una identificación en lugar de una clase.
Si desea ventana emergente con efecto de superposición, puede utilizar estos pasos ...
<style>
.overlay{
background:#000;
opacity:0.5;
position:fixed;
z-index:1;
width:100%;
height:100%;
}
.popup{
width:500px;
margin:auto;
position:fixed;
z-index:2;
height:300px;
}
</style>
<div class="overlay"></div>
<div class="popup">
Hello everyone
</div>
Si está utilizando jQuery para establecer la altura antes de la ventana emergente, supongo que está bien agregar más javascript :)
Puede establecer la altura del div en el desplazamiento Altura de document.body - de esta manera debe cubrir todo el cuerpo. Es necesario agregar un truco adicional para asegurarse de que sigue cubriendo el cuerpo en caso de que algo debajo decida crecer.
div.screenMask
{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 1000;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
visibility: hidden;
}
Al configurar todo top , bottom , left y right , el alto y el ancho se calculan automáticamente. Si screenMask es un elemento secundario directo del elemento <body> y el modelo de cuadro estándar está en vigor (es decir, el modo peculiar no se ha activado), esto cubrirá toda la página.