¿Hacer que la superposición de Div sea la página COMPLETA (no solo la ventana gráfica)?

95

Así que tengo un problema que creo que es bastante común, pero todavía tengo que encontrar una buena solución. Quiero hacer que un div de superposición cubra la página ENTERA ... NO solo la ventana gráfica. No entiendo por qué esto es tan difícil de hacer ... He intentado establecer body, html heights al 100%, etc. pero eso no funciona. Esto es lo que tengo hasta ahora:

<html>
<head>
    <style type="text/css">
    .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
    body { height: 100%; }
    html { height: 100%; }
    </style>
</head>

<body>
    <div style="height: 100%; width: 100%; position: relative;">
        <div style="height: 100px; width: 300px; background-color: Red;">
        </div>
        <div style="height: 230px; width: 9000px; background-color: Green;">
        </div>
        <div style="height: 900px; width: 200px; background-color: Blue;"></div>
        <div class="OverLay">TestTest!</div>
    </div>


    </body>
</html>

También estaría abierto a una solución en JavaScript si existe una, pero preferiría usar un CSS simple.

html css Polaris878
fuente
También puede leer más aquí: stackoverflow.com/questions/1938536/…
Marco Demaio
¿Se puede hacer esto de verdad con jQuery?
William Entriken

Respuestas:

226

La ventana gráfica es lo único que importa, pero es probable que desee que todo el sitio web permanezca oscurecido incluso mientras se desplaza. Para ello, desea utilizar en position:fixedlugar de position:absolute. Fixed mantendrá el elemento estático en la pantalla a medida que se desplaza, dando la impresión de que todo el cuerpo está oscurecido.

Ejemplo: http://jsbin.com/okabo3/edit

div.fadeMe {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}
<body>
  <div class="fadeMe"></div>
  <p>A bunch of content here...</p>
</body>
Sampson
fuente
3
Puede que me equivoque, pero ¿la posición fija funcionará en IE6? Sé que probablemente a nadie le importa mucho IE6.
Marco Demaio
29
@Marco No estoy seguro. Para ser honesto, si no se solicita explícitamente el soporte para un navegador de 10 años, no me voy a molestar más :)
Sampson
5
Entonces, ¿cómo lo hacen en dispositivos móviles? bradfrostweb.com/blog/mobile/fixed-position
BorisOkunskiy
3
+1 ¡Gracias! Amplié
kol
El problema que tengo con esto (que es utilizado por muchos complementos) es que cuando haces clic en un <select>elemento en iOS, mueve toda la ventana gráfica y básicamente rompe todo. elementos fijos que se mueven, cosas que no deberían desplazarse, etc.
billynoah
16 
body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}
Nate Barr
fuente
2
La mejor solución posible que existe. Simplemente alterna la clase "superpuesta" para el cuerpo y aplica el estilo de arriba al cuerpo con ese nombre de clase.
Sviatoslav Zalishchuk
3
Por favor, explique más esta respuesta. No entiendo el comentario de Sviatoslav.
Lonnie Best
1

En primer lugar, creo que ha entendido mal qué es la ventana gráfica. La ventana gráfica es el área que utiliza un navegador para representar páginas web, y de ninguna manera puede crear sus sitios web para anular esta área de ninguna manera.

En segundo lugar, parece que la razón por la que su overlay-div no cubrirá toda la ventana gráfica es porque tiene que eliminar todos los márgenes en BODY y HTML.

Intente agregar esto en la parte superior de su hoja de estilo; restablece todos los márgenes y rellenos en todos los elementos. Facilita el desarrollo posterior:

* { margin: 0; padding: 0; }

Editar: acabo de entender mejor tu pregunta. Position: fixed; probablemente funcionará para usted, como ha escrito Jonathan Sampson.

Arve Systad
fuente
1
No debes quitar el relleno y los márgenes de todo . Podría ser muy laborioso recuperarlos para muchos elementos como botones y entradas de formulario.
Sampson
1
En mi opinión, es una manera realmente fácil de tratar todo como lo mismo en todos los navegadores. Puede que no se aplique tanto hoy como lo hizo antes al adaptarme a IE5, pero todavía lo hago como una de las primeras cosas que escribo en una hoja de estilo.
Arve Systad
3
@Arve Te acerca, pero es mejor usar una hoja de reinicio probada por el tiempo. Visite meyerweb.com/eric/tools/css/reset para obtener más información; le encantará, se lo aseguro :)
Sampson
Lo he visto, y simplemente creo que es demasiado grande :)
Arve Systad
1
@Arve Los reinicios no son tan grandes; intente recuperarse por completo *{}y verá mucho más :)
Sampson
0

Tuve bastantes problemas porque no quería ARREGLAR la superposición en su lugar, ya que quería que la información dentro de la superposición se pudiera desplazar por el texto. Solía:

<html style="height=100%">
   <body style="position:relative">
      <div id="my-awesome-overlay" 
           style="position:absolute; 
                  height:100%; 
                  width:100%; 
                  display: block">
           [epic content here]
      </div>
   </body>
</html>

Por supuesto, el div en el medio necesita algo de contenido y probablemente un fondo gris transparente, ¡pero estoy seguro de que entiendes la esencia!

Benjamin Vaughan
fuente
-6

Miré la respuesta de Nate Barr arriba, que pareció gustarle. No parece muy diferente de lo más simple.

html {background-color: grey}
Justin Munce
fuente