Autoriser un div à couvrir la page entière au lieu de la zone dans le conteneur

89

J'essaye de faire en sorte qu'un div semi-transparent couvre tout l'écran. J'ai essayé ceci:

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

Mais cela ne couvre pas tout l'écran, cela ne couvre que la zone au sein de la div.

css Juteux
la source
4
Ajouterposition: absolute; top: 0; left: 0;
Sergiu Paraschiv
Existe-t-il une mise à jour pour CSS3 ou les extensions dont ils disposent aujourd'hui?
William Entriken

Réponses:

173

Ajouter position:fixed. Ensuite, la couverture est fixée sur tout l'écran, également lorsque vous faites défiler.
Et ajoutez peut-être aussi margin: 0; padding:0;pour qu'il n'y ait pas d'espace autour de la couverture. 

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

    top:0;
    left:0;

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

Et s'il ne doit pas rester sur l'écran fixe, utilisez position:absolute;

CSS Tricks a également un article intéressant sur la propriété plein écran.

Edit:
Je viens de trouver cette réponse, alors je voulais ajouter des choses supplémentaires.
Comme Daniel Allen Langdon l'a mentionné dans le commentaire, ajoutez top:0; left:0;pour être sûr que la couverture colle tout en haut et à gauche de l'écran.

Si vous avez des éléments en haut de la couverture (donc ça ne couvre pas tout), alors ajoutez z-index. Plus le nombre est élevé, plus il couvre de niveaux.

Michael Schmidt
la source
1
D'après mon expérience, j'avais également besoin detop: 0; left: 0;
Vivian River
J'ai toujours eu du mal avec la position absolue avec cela, mais l'utilisation de la position fixe fonctionnait beaucoup mieux. Merci
BrianLegg
2
Apparemment, il y a un piège: si l'élément position: fixed a un ancêtre avec une transformation css, alors il sera fixé par rapport à cet ancêtre au lieu de la fenêtre. developer.mozilla.org/en-US/docs/Web/CSS/position#Values
mpoisot
17

Vous devez définir l'élément parent 100%et

html, body {
    height: 100%;
}

Démo (modifié à desbackgroundfins de démonstration)

De plus, lorsque vous souhaitez couvrir tout l'écran, vous semblez vouloir le faire dim, donc dans ce cas, vous devez utiliserposition: 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 c'est le cas, tu n'as pas besoin html, body {height: 100%;}

Démo 2

M. Alien
la source
2
Peut-être que l'un des parents l'a fait position:relative. Ça ne marchera pas. Suggérer à la position:fixedplace.
Muhammad Talha Akbar
@MuhammadTalhaAkbar Oh je vois, déjà dt répondu ça, je pense que je devrais supprimer ma réponse
Mr. Alien
C'est mieux que d'autres si vous le modifiez un peu.
Muhammad Talha Akbar
13

Ça fera l'affaire!

div {
  height: 100vh;
  width: 100vw;
}
Conner Frey
la source
J'aime vraiment ça parce que c'est court et net.
Puremonk
6

Utilisez de position:fixedcette façon votre div restera sur toute la zone visible en continu.

donnez à votre div une classe overlayet créez la règle suivante dans votre CSS

.overlay{
    opacity:0.8;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}

Démo: http://www.jsfiddle.net/TtL7R/1/


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

Essaye ça

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

Appliquez une réinitialisation css pour réinitialiser toutes les marges et les rembourrages comme celui-ci

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

v2.0 | 20110126 Licence: aucune (domaine public) * /

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

Vous pouvez utiliser diverses réinitialisations css selon vos besoins, normalement et utiliser en css

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

body
{
margin: 0px;
padding: 0px;
}
Vinay Pratap Singh
la source
2
En quoi est-ce pertinent?
akauppi
0

Définissez les balises html et body heightsur 100%et supprimez la marge autour du corps:

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

Maintenant, définissez le positionde votre div sur 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 */
}

Démo: http://jsfiddle.net/F3LHW/

Vlabs
la source
0

veuillez essayer de régler la marge et le rembourrage à 0 sur le corps.

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