Lassen Sie ein Div die gesamte Seite anstelle des Bereichs innerhalb des Containers abdecken

Ich versuche, ein halbtransparentes Div so zu gestalten, dass es den gesamten Bildschirm abdeckt. Ich habe es versucht:

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

Dies deckt jedoch nicht den gesamten Bildschirm ab, sondern nur den Bereich innerhalb des Div.

Hinzufügen position:fixed. Dann wird die Abdeckung über den gesamten Bildschirm fixiert, auch wenn Sie scrollen.
Und fügen Sie vielleicht auch hinzu, margin: 0; padding:0;damit es keinen Platz um das Cover gibt.

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

    top:0;
    left:0;

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

Und wenn es nicht fest auf dem Bildschirm kleben sollte, verwenden Sie position:absolute;

CSS Tricks haben auch einen interessanten Artikel über Vollbild-Eigenschaften.

Bearbeiten:
Ich bin gerade auf diese Antwort gestoßen, deshalb wollte ich einige zusätzliche Dinge hinzufügen.
Wie Daniel Allen Langdon im Kommentar erwähnt hat, top:0; left:0;bleibt das Cover ganz oben und links auf dem Bildschirm hängen.

Wenn sich einige Elemente oben auf dem Cover befinden (damit nicht alles abgedeckt wird), fügen Sie hinzu z-index. Je höher die Zahl, desto mehr Ebenen werden abgedeckt.

Sie müssen das übergeordnete Element setzen 100%und

html, body {
    height: 100%;
}

Demo (backgroundFür Demozweckegeändert)

Wenn Sie den gesamten Bildschirm abdecken möchten, scheint dimdies auch der Fall zu sein . In diesem Fall müssen Sie ihn verwendenposition: 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 */
}

Wenn das der Fall ist, brauchen Sie es nicht html, body {height: 100%;}

Demo 2

Dies wird den Trick machen!

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

Auf position:fixeddiese Weise bleibt Ihr Div kontinuierlich über den gesamten sichtbaren Bereich.

Geben Sie Ihrem Div eine Klasse overlayund erstellen Sie die folgende Regel in Ihrem CSS

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

Demo: http://www.jsfiddle.net/TtL7R/1/

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

Versuche dies

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

Wenden Sie einen CSS-Reset an, um alle Ränder und Auffüllungen wie folgt zurückzusetzen

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

v2.0 | 20110126 Lizenz: keine (gemeinfrei) * /

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

Sie können verschiedene CSS-Resets nach Bedarf verwenden, normal und in CSS verwenden

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

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

Setzen Sie die HTML- und Body-Tags heightauf 100%und entfernen Sie den Rand um den Body:

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

Stellen Sie nun das positionvon Ihrem div auf 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 */
}

Demo: http://jsfiddle.net/F3LHW/

Bitte versuchen Sie, den Rand und die Polsterung am Körper auf 0 zu setzen.

<body style="margin: 0 0 0 0; padding: 0 0 0 0;">