Menu
My post is in regards to http://www.thepostboard.net
I need to make the black box that is currently covering 100% of the viewport cover the entire page instead. You'll only be able to notice this if your screen needs a scrollbar to view the website--otherwise it looks fine.
I have the overlaying div set to:
position: absolute;
height: 100%;
width: 100%;
I also have body set to:
height: 100%;
margin: 0px 0px;
padding: 0px; 0px;
But for some reason on my laptop if I scroll down I see the edge of the DIV and nothing is blocked off underneath it.
The purpose of this is to create a custom lightbox for the website. I have disabled the Javascript that dims the box so you can see the effect.
How do I make it cover the entire page, not just the viewport?
(My laptop is a 1366x768, so presumably you'd see it on anything with a height resolution <= 760).
370
The <div> needs to be
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
background-color: red;
It will then stay within the viewport's dimensions and "travel" with the scrollbar.
Edit: it will only cover the entire viewport if <body> is styled to
margin: 0;
padding: 0;
This solution has worked best for me:
#overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
No need to style any other elements except the tag.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
