Permettre à un div de couvrir toute la page au lieu de la zone située à l'intérieur du conteneur

Question

J'essaie 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 l'ensemble de l'écran, seulement la zone située à l'intérieur de la division.

Answer 1

Ajouter position:fixed . La couverture est alors fixée sur l'ensemble de l'écran, même lorsque vous faites défiler l'écran.
Et ajouter peut-être aussi margin: 0; padding:0; pour qu'il n'y ait pas d'espace autour du couvercle.

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

    top:0;
    left:0;

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

Et si elle ne doit pas coller à l'écran fixe, utilisez position:absolute;

Trucs et astuces CSS ont également un article intéressant sur la propriété fullscreen.

Edita:
Je viens de tomber sur cette réponse, et je voulais donc ajouter quelques éléments supplémentaires.
Comme Daniel Allen Langdon mentionné dans le commentaire, ajoutez top:0; left:0; pour être sûr, le couvercle se colle tout en haut et à gauche de l'écran.

Si vous souhaitez que certains éléments se trouvent en haut de la couverture (afin qu'elle ne couvre pas tout), ajoutez alors z-index . Plus le chiffre est élevé, plus le nombre de niveaux couverts est important.

Answer 2

Vous devez définir l'élément parent à 100% également

html, body {
    height: 100%;
}

Démo (Modification de la background à des fins de démonstration)

---

Aussi, quand vous voulez couvrir tout l'écran, on dirait que vous voulez dim donc, dans ce cas, vous devez utiliser l'option position: 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, alors vous n'avez pas besoin de html, body {height: 100%;}

Démo 2

Answer 3

Cela fera l'affaire !

div {
  height: 100vh;
  width: 100vw;
}

Answer 4

Utilisez position:fixed de cette façon, votre div restera sur toute la zone visible en permanence .

Donnez de la classe à votre division overlay et 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émonstration : http://www.jsfiddle.net/TtL7R/1/

Answer 5

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