CSS - irregular linear gradient

Question

Why is the background gradient wrong at the end of the page if I resize the window?

http://jsfiddle.net/hca6zz20/2/ - the best example of a gradient from red to blue

http://jsfiddle.net/hca6zz20/

html,
body {
  height: 100%;
}

body {
  background-image: linear-gradient(#363663, #1b1b32);
  margin: 0;
}

Answer 1

You need to change:

html,
body {
  height: 100%;
}

To:

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

Demo

FULLSCREEN DEMO

Answer 2

your white div is overflowing, so you need to change the body from 100% to auto.

html,
body {
   height: auto;
}