Allow a div to cover the whole page instead of the area within the container

Question

I'm trying to make a semi-transparent div cover the whole screen. I tried this:

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

But that doesn't cover the whole screen, it only covers the area within the div.

Is there any update for CSS3 or whatever extensions they have today? — William Entriken, Apr 26 '16 at 03:46

score 220 · Accepted Answer · edited Mar 08 '21 at 14:24

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.

Apparently there is a gotcha: if the position:fixed element has an ancestor with a css transform, then it will be fixed relative to that ancestor instead of the viewport. https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values — mpoisot, Oct 07 '16 at 14:02

Mr. Alien · Answer 2 · 2013-09-03T09:46:02.020

28

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

edited Sep 03 '13 at 09:46

answered Sep 03 '13 at 09:37

Mr. Alien

153,751
34
298
278

2

Maybe any of the parents have `position:relative`. It will not work. Suggest `position:fixed` instead. – Muhammad Talha Akbar Sep 03 '13 at 09:41

score 17 · Answer 3 · answered Sep 12 '16 at 00:35

17

This will do the trick!

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

answered Sep 12 '16 at 00:35

Conner Frey

553
1
5
12

score 7 · Answer 4 · answered Sep 10 '13 at 07:26

7

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/

answered Sep 10 '13 at 07:26

This is not showing the overlay div to me... Did something change since '13? – erikbstack Oct 27 '21 at 19:34

score 2 · Answer 5 · answered Sep 03 '13 at 09:38

2

Try this

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

answered Sep 03 '13 at 09:38

Vladislav Stanic

795
8
13

score 2 · Answer 6 · answered Sep 03 '13 at 09:40

2

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

answered Sep 03 '13 at 09:40

tabone

172
1
5

score 1 · Answer 7 · answered Sep 03 '13 at 09:39

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

score 0 · Answer 8 · answered Sep 03 '13 at 09:51

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/

score 0 · Answer 9 · answered Oct 31 '14 at 11:56

0

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

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

answered Oct 31 '14 at 11:56

Devendra Patel

309
2
10

Allow a div to cover the whole page instead of the area within the container

9 Answers9

Linked