允许 div 覆盖整个页面，而不是容器内的区域

小开

You need to set the parent element to 100% as well

html, body {
height: 100%;
}

Demo (Changed the background for demo purpose)

Also, when you want to cover entire screen, seems like you want to dim, so in this case, you need to use 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 */
}

If that's the case, than you don't need html, body {height: 100%;}

Demo 2

小开

最佳答案

Add position:fixed. Then the cover is fixed over the whole screen, also when you scroll.
And add maybe also margin: 0; padding:0; so it wont have some space's around the cover.

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


top:0;
left:0;


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

And if it shouldn't stick on the screen fixed, use position:absolute;

CSS Tricks have also an interesting article about fullscreen property.

Edit:
Just came across this answer, so I wanted to add some additional things.
Like Daniel Allen Langdon mentioned in the comment, add top:0; left:0; to be sure, the cover sticks on the very top and left of the screen.

If you want some elements to be at the top of the cover (so it doesn't cover everything), then add z-index. The higher the number, the more levels it covers.

小开

Try this

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

小开

Apply a css-reset to reset all the margins and paddings like this

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

v2.0 | 20110126 License: none (public domain) */

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

You can use various css-resets as you need, normal and use in css

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


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

小开

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

小开

Set the html and body tags height to 100% and remove the margin around the body:

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

Now set the position of your div to 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/

小开

Use position:fixed this way your div will remain over the whole viewable area continuously ..

give your div a class overlay and create the following rule in your 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/

小开

please try with setting margin and padding to 0 on body.

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

小开

This will do the trick!

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