proper css to ensure that the body element fills the entire screen

Question

I have a problem with my body element. It seems that it is filling 100% percent of the screen. However, if you drag the browser small and then scroll down - the body doesn\'t

Answer 1

1) If you want to have the body fill the whole screen, while solving 2 things simultaneously (due to the body having dynamic content)

1. not enough content: the body is at least as tall as the viewport, since your body doesn't have enough content to fill the screen
2. too much content: the body should be as tall as the html

Now you can use min-height:100vh for that, which means 100% of the viewport's height: http://jsfiddle.net/LBu8z/89/

Except the Opera Mini it is supported by all browsers: caniuse.com/#search=vh

2) if you want to have a fixed background image, then I suggest to stretch a fixed position body:after

I needed this solution in production since a background-sizing:cover won't work properly with a fixed backround, thus I had to make the body:after fixed and the background image not fixed. You can check it here: https://www.doklist.com/

body:after{
  content:"";
  background:green;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:-1;
}

3) If you want to do it with only the body, then: stretch a fixed body with overflow scroll. But be aware it may interfere with some elements (eg. bootstrap tooltips and popovers)

body {
    background: green;
    overflow-y:scroll;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}