Permita que un div cubra toda la página en lugar del área dentro del contenedor

89

Estoy tratando de hacer que un div semitransparente cubra toda la pantalla. Probé esto:

#dimScreen
{
    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);
}

Pero eso no cubre toda la pantalla, solo cubre el área dentro del div.

css Jugoso
fuente
4
Agregarposition: absolute; top: 0; left: 0;
Sergiu Paraschiv
¿Hay alguna actualización para CSS3 o cualquier extensión que tengan hoy?
William Entriken

Respuestas:

173

Agregar position:fixed. Luego, la cubierta se fija en toda la pantalla, también cuando se desplaza.
Y agregue quizás también margin: 0; padding:0;para que no tenga espacio alrededor de la cubierta. 

#dimScreen
{
    position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);
}

Y si no se fija en la pantalla, usa position:absolute;

CSS Tricks también tiene un artículo interesante sobre la propiedad de pantalla completa.

Editar:
Acabo de encontrar esta respuesta, así que quería agregar algunas cosas adicionales.
Como mencionó Daniel Allen Langdon en el comentario, agregue top:0; left:0;para estar seguro, la cubierta se pega en la parte superior e izquierda de la pantalla.

Si algunos elementos están en la parte superior de la portada (por lo que no cubre todo), agregue z-index. Cuanto mayor sea el número, más niveles cubre.

Michael Schmidt
fuente
1
En mi experiencia, también necesitabatop: 0; left: 0;
Vivian River
Siempre he tenido problemas con la posición absoluta con esto, pero usar la posición fija funcionó mucho mejor. Gracias
BrianLegg
2
Aparentemente hay un problema: si el elemento position: fixed tiene un ancestro con una transformación css, entonces será fijo en relación con ese ancestro en lugar de la ventana gráfica. developer.mozilla.org/en-US/docs/Web/CSS/position#Values
mpoisot
17

Es necesario configurar el elemento padre para 100%así

html, body {
    height: 100%;
}

Demo (se modificóbackgroundpara fines de demostración)

Además, cuando desea cubrir toda la pantalla, parece que desea hacerlo dim, por lo que en este caso, debe usarposition: fixed;

#dimScreen {
    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5); 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100; /* Just to keep it at the very top */
}

Si ese es el caso, entonces no necesitas html, body {height: 100%;}

Demo 2

Sr. Alien
fuente
2
Quizás alguno de los padres lo haya hecho position:relative. No funcionará. Sugerir en su position:fixedlugar.
Muhammad Talha Akbar
@MuhammadTalhaAkbar Oh, ya veo, ya respondí eso, creo que debería eliminar mi respuesta
Sr. Alien
Es mejor que otros si lo cambia un poco.
Muhammad Talha Akbar
13

¡Esto hará el truco!

div {
  height: 100vh;
  width: 100vw;
}
Conner Frey
fuente
Me gusta mucho esto porque es corto y limpio.
Puremonk
6

Utilice de position:fixedesta manera su div permanecerá en toda el área visible de forma continua.

dale a tu div una clase overlayy crea la siguiente regla en tu CSS

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


fuente
2 
#dimScreen{
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
}
tabone
fuente
1

Prueba esto

#dimScreen {
    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);
    position: fixed;
    top: 0;
    left: 0;
}
Vladislav Stanic
fuente
1

Aplicar un css-reset para restablecer todos los márgenes y rellenos como este

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126 Licencia: ninguna (dominio público) * /

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Puede usar varios css-resets según lo necesite, normal y usar en css

 html
 {
  margin: 0px;
 padding: 0px;
 }

body
{
margin: 0px;
padding: 0px;
}
Vinay Pratap Singh
fuente
2
¿Cómo es esto relevante?
akauppi
0

Establecer las etiquetas html y corporales heighta 100%y retirar el margen alrededor del cuerpo:

html, body {
    height: 100%;
    margin: 0px; /* Remove the margin around the body */
}

Ahora configure el positionde su div en fixed:

#dimScreen
{
    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);

    position: fixed;
    top: 0px;
    left: 0px;

    z-index: 1000; /* Now the div will be on top */
}

Demostración: http://jsfiddle.net/F3LHW/

Vlabs
fuente
0

intente establecer el margen y el relleno en 0 en el cuerpo.

<body style="margin: 0 0 0 0; padding: 0 0 0 0;">
Devendra Patel
fuente