user_name user_name - 1 year ago 106
CSS Question

body height 100% with absolute positioned content doesn't work

To set body-height to 100% I use the following code:

html {height: 100%;}

min-height: 100%;
position: relative;

I thought this workaround works always, no matter what the content does, but when I use content, that is absolute positioned, the body seems to loose the 100%-height property.

You can see the example here:

  1. Go to

  2. Reduce the browser width as far as u can.

  3. scroll down.

  4. there is a white area at the bottom.

Position:fixed; would help for the white area, but then it is impossible to reach the button at the bottom.

position: fixed; and overflow-y:scroll; will result in a double scroll bar - doesn't look very nice.

Have you got an idea how to pull the body down until the bottom?

Answer Source

position: fixed; overflow-y:auto; will prevent scrollbar showing when it is not getting overflow. It prevents double scrollbar issue

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download