Set height 100 on absolute div

Question

I am facing a problem with overlaying a 100  height div  I could use position fixed to solve the cover  but that s not really what I want because you should be able to scroll down on the  cover    so people with lower resolutions than mine can see the entire content   Code example   HTML   lt body gt   lt div gt Overlay example text lt  div gt   lt  body gt    CSS  body       float  left      height  3000px      width  100     body div       position  absolute      height  100       width  100       background-color  yellow      The problem  The div s height 100  only contains 100  of the webbrowser viewport  but I want it to cover the entire body   Thanks in advance

User · Answer

Few answers have given a solution with height and width 100% but I recommend you to not use percentage in css, use top/bottom and left/right positionning.

This is a better approach that allow you to control margin.

Here is the code :

body {
    position: relative;
    height: 3000px;
}
body div {

    top:0px;
    bottom: 0px;
    right: 0px;
    left:0px;
    background-color: yellow;
    position: absolute;
}

User · Answer

http   jsbin com ubalax 1 edit  You can see the results here          body       position  relative      float  left      height  3000px      width  100     body div       position  absolute      height  100       width  100       top 0      left 0      background-color  yellow

User · Answer

try adding  position relative   to your body styles   Whenever positioning anything absolutely  you need one of the parent containers to be positioned relative as this will make the item be positioned absolute to the parent container that is relative   As you had no relative elements  the css will not know what the div is absolutely position to and therefore will not know what to take 100  height of

User · Answer

Instead of using the body  using html worked for me   html      min-height 100      position  relative     div      position  absolute      top  0px     bottom  0px     right  0px     left  0px

User · Answer

Another solution without using any height but still fills 100  available height  Checkout this e g on the codepen  http   codepen io gauravshankar pen PqoLLZ  For this html and body should have 100  height  This height is equal to the viewport height   Make inner div position absolute and give top and bottom 0  This fills the div to available height   height equal to body    html code         lt head gt  lt  head gt    lt body gt     lt div gt  lt  div gt   lt  body gt    lt  html gt    css code         margin  0    padding  0     html  body     height  100     position  relative     html     background-color  red     body     background-color  green     body gt  div     position  absolute    background-color  teal    width  300px    top  0    bottom  0

User · Answer

Complete stretching  horizontal vertical   The accepted answer is great  Just want to point out some things for others coming here  Margins are not necessary in these cases  If you want a centered layout with a specific  Margin   you can add them to the right and left  like so    stretched     position  absolute    right  50px   top  0   bottom  0  left  50px    margin  auto      This is extremely useful    Centering div  vertical horizontally   As a bonus  absolute centering which can be used to get extremely simple centering    centered     height  100px   width  100px      right  0   top  0   bottom  0  left  0    margin  auto    position  absolute

[html] Set height 100% on absolute div

Examples related to html

Examples related to css

Examples related to absolute