Make Div overlay ENTIRE page not just viewport

Question

So I have a problem that I think is quite common but I have yet to find a good solution for   I want to make an overlay div cover the ENTIRE page    NOT just the viewport   I don t understand why this is so hard to do     I ve tried setting body  html heights to 100  etc but that isn t working   Here is what I have so far    lt html gt   lt head gt       lt style type  text css  gt       OverLay   position  absolute  z-index  3  opacity  0 5  filter  alpha opacity   50   top  0  bottom  0  left  0  right  0  width  100   height  100   background-color  Black  color  White       body   height  100         html   height  100          lt  style gt   lt  head gt    lt body gt       lt div style  height  100   width  100   position  relative   gt           lt div style  height  100px  width  300px  background-color  Red   gt           lt  div gt           lt div style  height  230px  width  9000px  background-color  Green   gt           lt  div gt           lt div style  height  900px  width  200px  background-color  Blue   gt  lt  div gt           lt div class  OverLay  gt TestTest  lt  div gt       lt  div gt         lt  body gt   lt  html gt     I d also be open to a solution in JavaScript if one exists  but I d much rather just be using some simple CSS

User · Answer

I looked at Nate Barr s answer above  which you seemed to like  It doesn t seem very different from the simpler   html  background-color  grey

User · Answer

The viewport is all that matters  but you likely want the entire website to stay darkened even while scrolling  For this  you want to use position fixed instead of position absolute  Fixed will keep the element static on the screen as you scroll  giving the impression that the entire body is darkened   Example  http   jsbin com okabo3 edit  div fadeMe     opacity     0 5     background   000     width       100     height      100      z-index     10    top         0     left        0     position    fixed          lt body gt     lt div class  fadeMe  gt  lt  div gt     lt p gt A bunch of content here    lt  p gt   lt  body gt

User · Answer

body before       content           width  100       height  100       position  fixed      z-index  -1      top  0      left  0      background  rgba 0  0  0  0 5

User · Answer

First of all  I think you ve misunderstood what the viewport is  The viewport is the area a browser uses to render web pages  and you cannot in any way build your web sites to override this area in any way   Secondly  it seems that the reason that your overlay-div won t cover the entire viewport is because you have to remove all margins on BODY and HTML   Try adding this at the top of your stylesheet - it resets all margins and paddings on all elements  Makes further development easier       margin  0  padding  0      Edit  I just understood your question better  Position  fixed  will probably work out for you  as Jonathan Sampson have written

User · Answer

I had quite a bit of trouble as I didn t want to FIX the overlay in place as I wanted the info inside the overlay to be scrollable over the text  I used   lt html style  quot height 100  quot  gt      lt body style  quot position relative quot  gt         lt div id  quot my-awesome-overlay quot              style  quot position absolute                     height 100                      width 100                      display  block quot  gt              epic content here         lt  div gt      lt  body gt   lt  html gt   Of course the div in the middle needs some content and probably a transparent grey background but I m sure you get the gist

[html] Make Div overlay ENTIRE page (not just viewport)?

Examples related to html

Examples related to css