Make body have 100% of the browser height

Try setting the height of the html element to 100% as well.

html, 
body {
    height: 100%;
}

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.

However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.

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

As an alternative to setting both the html and body element's heights to 100%, you could also use viewport-percentage lengths.

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

In this instance, you could use the value 100vh - which is the height of the viewport.

Example Here

body {
  height: 100vh;
  padding: 0;
}

body {
  min-height: 100vh;
  padding: 0;
}

This is supported in most modern browsers - support can be found here.