CSS body 100% height and overflow when necessary

Question

I know how to ensure that the HTML body vertically stretches/shrinks to 100% height of the browser viewport (by having 100% height in the body and html rules).

I also know that normal HTML flow will result in containers vertically stretching to contain their contents (if things are set up properly).

Yet, I cannot seem to achieve both.

I.e. I cannot beat CSS into ensuring that when my page is viewed on a high resolution screen that it vertically stretches to leave no gaps AND to ensure that if my page is viewed on a lower resolution screen that the body stretches past the viewport (to accommodate all the content) and introduces scrollbars.

To me that is ideal behaviour and yet I sadly believe that this cannot be achieved purely in CSS. I know I can do this in JavaScript quite easily, but I want to be able to do it just in CSS.

Is it possible, or am I forced to use JavaScript?

Edit: I have researched, tried and test so many techniques, but it just seems like it can't be done. Looks like I am going to have to go back to JavaScript.

score 1 · Accepted Answer · answered Dec 13 '13 at 11:21

OK so this definitely works for me:

html {
   height: 100%;
}

body {
   min-height: 100%;
   display: flex;
}

#wrapper {
   width: 100%; /* Necessary because of side-effect of flex */
   height: 100%;
}

Exactly what I tried before, but I thought I would give this new CSS feature "flex" a go and it has done the trick. So it looks the CSS managers/creators have finally addressed these critical issues with dynamic height and vertical centring.

I hope this helps someone else stuck on this issue.

score 0 · Answer 2 · answered Dec 12 '13 at 12:26

0

You can use the min-height css property.

html, body {
  min-height: 100%;
}

answered Dec 12 '13 at 12:26

Tibos

27,507
4
50
64

This seems to stretch the html entity to the size of the viewport (good), but unfortunately the body does not stretch as well. I tried making html have min-height 100% and body 100%, but that gives the same result. – pleasedesktop Dec 12 '13 at 12:36

score 0 · Answer 3 · answered Dec 12 '13 at 12:33

0

min-height: 100%; /* other browsers */
height: auto !important; /* other browsers */
height: 100%; /* IE6: treated as min-height*/

answered Dec 12 '13 at 12:33

Mr.G

3,413
2
16
20

Which rule/element should I apply these too? I tried html by itself and html and body; neither seem to work. – pleasedesktop Dec 12 '13 at 12:36
your need use html,body – Mr.G Dec 12 '13 at 12:39

score 0 · Answer 4 · edited May 23 '17 at 10:25

0

Taking inspiration from a question which seems to be pretty much the same as mine: Make body have 100% of the browser height

This is working for me:

html {
  height: 100%;
}
body {
  min-height: 100%;
}

edited May 23 '17 at 10:25

Community

1
1

answered Dec 13 '13 at 05:00

pleasedesktop

1,395
3
14
25

Argghhh this doesn't work either, because then the containers inside body cannot be vertically stretched via percentage heights because CSS states that height only works if the parent has a fixed height (i.e. body cannot have min-height, but needs height). So... back to square one. – pleasedesktop Dec 13 '13 at 05:32

CSS body 100% height and overflow when necessary

4 Answers4