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,         


        

Answer 1

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