CODEWITHSUNDEEP
htmlcsscss-position
Mark
Mark

Reputation: 6977

Absolute positioned DIV to be 100% of body height

I would like to have a div that covers the entire body of a page, even if the content has to be scrolled.

The typical approach is to use an absolutely positioned div while setting 100% height on html and body.

However, if there is other content on the page that is longer than what fits on screen, my 100% height div only covers the visible area of the window and does not stretch all the way until the end of the page.

Example: http://jsbin.com/wuqezaceteme/1/

CSS:

body, html {
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}

body {
  position:relative;
}

.wrapper {
  position:absolute; /* can't use fixed */
  background:yellow;
  height:100%;
  width:100%;
  top:0;
  left:0;
}

.box {
  height:2200px;
}

HTML: 

 <div class="wrapper">
 Scroll down (yellow box does not go to bottom when scrolling)
 </div>

 <div class="box">box</div>

</body>

Upvotes: 3

Views: 4704

Answers (2)

Hilario Goes
Hilario Goes

Reputation: 453

This may help somebody else since this is an old question that seems to be answered.

The main problem is that your div is bound to the viewport rather then the body. Since you want it to be bound to the body use:-

    body {
        position: relative;
    }

Also do not add height:100% to the body or html (that is not needed).
That should do it. Now your .wrapper div will be 100% to your body. Even if you scroll the page it will remain 100% since it is bound to the body.

Upvotes: 9

Benjamin
Benjamin

Reputation: 2670

Your body have a default height:100% which is the initial height of your window you need to make the height auto either you need to remove it from your style 

body, html {
  margin:0;
  padding:0;
  <--height:100%;--> Removed
  width:100%;
}

Working demo

Upvotes: 3

Related Questions