CSS: ¿Cómo conseguir que esta superposición se extienda al 100% con desplazamiento?

Aquí se muestra un ejemplo del tema en cuestión:CSS: ¿Cómo conseguir que esta superposición se extienda al 100% con desplazamiento?

http://dev.madebysabotage.com/playground/overlay.html

Ves que hay una superposición de color gris sobre toda la página, pero si se desplaza hacia abajo, el contenido por debajo de la página cargada inicial no tienen la superposición.

Tengo un div #overlay y parece que no mantiene el 100% de altura durante el desplazamiento, por lo que trata de averiguar cómo sacarlo.

Aquí está el código fuente completo:

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>CSS Overlay</title> 
    <style type="text/css"> 
    html { 
     height: 100%; 
     min-height: 100%; 
    } 
    body { 
     height: 100%; 
     min-height: 100%; 
     font-family: Georgia, sans-serif; 
    } 
    #overlay { 
     background: rgba(0,0,0,0.4); 
     width: 100%; 
     height: 100%; 
     min-height: 100%; 
     position: absolute; 
     top: 0; 
     left: 0; 
     z-index: 10000; 
    } 
    header, section, footer { 
     width: 800px; 
     margin: 0 auto 20px auto; 
     padding: 20px; 
     background: #ff0; 
    } 
    section { 
     min-height: 1500px; 
    } 
    </style> 
</head> 

<body> 
    <div id="overlay"></div> 
    <header> 
    <h1>Header</h1> 
    </header> 
    <section> 
    <p>Here's some sweet content</p> 
    </section> 
    <footer> 
    <p>Here's my footer</p> 
    </footer> 
</body> 
</html>

Fuente

2011-01-10 Shpigford

¡Gracias por esto! Para cualquier otra persona que lea, el problema se soluciona en el enlace de arriba. Para recrearlo use Firebug o similar para eliminar 'position: fixed;' de la identificación de superposición :) – RyanM

3 años más tarde y tengo el mismo problema :) +1 para la pregunta – Ljubisa

131

position: fixed; en la superposición.

Fuente

2011-01-10 15:36:29 benhowdle89

no me avergüenzo, los errores simples me llevan horas verlos a veces !! ! – benhowdle89

Observa que las posiciones fijas no son compatibles con IE6. Pero teniendo en cuenta el hecho de que está utilizando los valores de rgba, supongo que no le importa IE en absoluto. : p – Dan

¿quién lo hace? ;) (todos deberíamos realmente) ha – benhowdle89

Cambio #overlayposition:absolute a position:fixed

Fuente

2011-01-10 15:37:32 Bazzz

Esto sucede porque el #overlayposition: absolute es relativo a la <html> y el uso de sus dimensiones, que sólo es la altura de la vista.

Para asegurarse de que el #overlay utiliza las dimensiones de página entera, se puede usar en la position: relative;<body> (pero usted tendrá que quitar el min-height: 100% y height: 100% en el <body> en primer lugar porque esto hace que utilizar el tamaño de la ventana gráfica). El #overlay utilizará las dimensiones <body> y rellenará toda la página.

Fuente

2015-10-14 14:09:57 Thom

CSS: ¿Cómo conseguir que esta superposición se extienda al 100% con desplazamiento?

Respuesta

Cuestiones relacionadas