user_name user_name - 13 days ago 8
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%;}

body{
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 https://www.appfelsine.com/was-kostet-eine-App

  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

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

Comments