Giving background-color to body applying whole page. Why?

body {
  background-color: red;
}

<body>
  <div>Hello World!</div>
</body>

So the background-color: red; applies to whole page height but when I inspect the page the height of the body is only up to the div containing Hello World!.

Someone please explain this why it is happening like this.