CODEWITHSUNDEEP
jqueryhtmlcss
AntonB
AntonB

Reputation: 2853

CSS wrapper div height: 100% not covering full page height

When there is not enough content in the div id="content" the red wrapper fills 100%, but when the content gets longer, the red wrapper does not fill 100% screen height and the content div overflows.

The code: http://codepen.io/anon/pen/JAbuq

Here is the image to demonstrate, re-size the browser to a smaller height. I need this for a mobile browser display.

Small browser.

Upvotes: 3

Views: 6619

Answers (3)

Andrea Falzetti
Andrea Falzetti

Reputation: 360

the white container goes out because of padding and margin. The body has some initial margin. I've changed it, give a look here http://codepen.io/anon/pen/eiocy/

Upvotes: 0

PressingOnAlways
PressingOnAlways

Reputation: 12356

This is because your content-wrapper is 100% of the size of the WINDOW, not the content. When the content is larger than the window, it bleeds beyond the wrapper.

Changing height to min-height in #content-wrapper will solve this issue:

http://codepen.io/anon/pen/mazBd/

Upvotes: 0

S.B.
S.B.

Reputation: 2969

Use min-height: 100% instead of height: 100% to allow the wrapper to grow beyond the browser viewport height:

#content-wrapper {
  width: 100%;
  float: none;
  position: absolute;
  box-shadow: none;
  overflow: visible;
  min-height: 100%;
  background: red;
}

Demo: http://codepen.io/anon/pen/niCfJ/

Upvotes: 5

Related Questions