¿Cómo hacer un div 100% de la altura de la página (no de la pantalla)?

Estoy tratando de usar CSS para crear un efecto '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.¿Cómo hacer un div 100% de la altura de la página (no de la pantalla)?

Este es el CSS de la 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.

Fuente

2009-06-16 Lee D

¿funcionaría para desactivar la barra para desplazarse mientras se muestra que div gris translúcido? ¿Realmente quieres que los usuarios puedan desplazarse hacia abajo para ver algo con lo que no pueden hacer nada? – Adam

Si cambia 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, fijarlo para todos los otros navegadores también, pero yo no prefiero 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.

También existen plenty of hacks around to make fixed positioning work in IE6, 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.

Fuente

2009-06-16 20:02:59 mercator

Si la máscara se muestra con Javascript, ¿qué es más Javascript para solucionar el problema de la altura? –

¡Gracias, cambiar de absoluto a fijo fue todo lo que se necesitaba! Punto justo sobre la identificación también. –

@Lee: Excelente ... @Paolo: No es un problema aquí, tengo que estar de acuerdo. Pero aunque el soporte de JS no es el problema aquí, terminas mezclando el estilo con el comportamiento, y puedes (ligeramente) afectar el rendimiento también. Y Lee también respondió tu pregunta. La solución de JavaScript no era realmente necesaria en este caso. – mercator

Si está utilizando jQuery para ajustar la altura antes de la ventana emergente que supongo que está bien para añadir un poco más de javascript :)

Puede ajustar la altura de la div a la scrollHeight 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.

Fuente

2009-06-16 20:05:47 ylebre

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 establecer todos top, bottom, left, y right, la altura y la anchura se calculan automáticamente. Si screenMask es un elemento 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.

Fuente

2009-06-16 20:26:26

¿No necesita usar 'position: fixed' para evitar que div.screenMask se desplace, si la página subyacente es más alta que la altura de un puerto de visualización? –

Esto no funciona en IE6 en absoluto. En otros navegadores, necesita una posición: relativa en el cuerpo para trabajar, y aun así solo funciona en desplazamiento vertical, no en desplazamiento horizontal. – mercator

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 todo! Ahora su elemento se colocará en relación con <body> en lugar de la ventana gráfica.

No me molestaría con 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 <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> en height: 100% para asegurarse de que nunca termine con una ventana parcialmente enmascarada en una página más corta.

Dos puntos válidos tomados de las respuestas anteriores. Como dice Ben Blank, puede perder las declaraciones width y height, colocando 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 a la siguiente CSS recomendada completa:

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!

Fuente

2012-08-16 03:32:34

+1, sin embargo, señalaré que incluso este es un enfoque cuestionable al cambiar la posición del contenedor de desplazamiento a relativa puede tener consecuencias imprevistas. Afortunadamente para mí, hoy, mi contenedor de desplazamiento ya está en posición relativa. El truco de usar 'position: absolute' combinado con' left', 'right',' top', y 'bottom' es un verdadero salvavidas a veces, y siempre es fácil olvidarlo. –

El posicionamiento relativo al "cuerpo" casi lo resuelve, pero configurar la altura del cuerpo al 100% no es una solución útil: mientras repara páginas que no ocupan la ventana gráfica, rompe las más grandes, es decir, el cuerpo solo tendrá la altura de la ventana . Además, establecer 'min-height: 100%' en el cuerpo parece no hacer nada en absoluto (Firefox). –

Si desea emergente con efecto de superposición entonces usted puede utilizar este paso ..

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

Fuente

2014-09-18 12:43:27

¿Cómo hacer un div 100% de la altura de la página (no de la pantalla)?

Respuesta

Cuestiones relacionadas