Allow a div to cover the whole page instead of the area within the container
CssCss Problem Overview
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.
Css Solutions
Solution 1 - Css
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.
Solution 2 - Css
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%;}
Solution 3 - Css
This will do the trick!
div {
height: 100vh;
width: 100vw;
}
Solution 4 - Css
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;
}
Solution 5 - Css
#dimScreen{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
Solution 6 - Css
Try this
#dimScreen {
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
position: fixed;
top: 0;
left: 0;
}
Solution 7 - Css
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;
}
Solution 8 - Css
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 */
}
Solution 9 - Css
please try with setting margin and padding to 0 on body.
<body style="margin: 0 0 0 0; padding: 0 0 0 0;">