Resizing page cuts off linear gradient

Issue

Whenever I resize the page, the linear gradient gets cut off.

CSS

html, body {
    height: 100%;
}

body {
    background: linear-gradient(to bottom, #cfdfff, #75b5e3);
    margin: 0; 
} 

When the page is resized, the body no longer takes up 100% of the page, and therefore the gradient is cut off. (White space is rest of page) If I use a static color as the background, this issue does not happen.

Solution

use min-height instead of height

html {
    min-height: 100%;
}
body {
    background: linear-gradient(to bottom, #cfdfff, #75b5e3);
    margin: 0;
} 

div{
  width: 200px;
  background-color: aquamarine;
  height: 200px;
  margin: 20px;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answered By - 严文彬