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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

dimScreen   position fixed   top 0px   left 0px   width 100    height 100

User · Answer

Try this   dimScreen       width  100       height  100       background rgba 255 255 255 0 5       position  fixed      top  0      left  0

User · Answer

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 some elements are 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

User · Answer

please try with setting margin and padding to 0 on body    lt body style  margin  0 0 0 0  padding  0 0 0 0   gt

User · Answer

This will do the trick   div     height  100vh    width  100vw

User · Answer

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

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

Examples related to css