div not growing in height when I use percentage (CSS HTML)

Question

I've recently been working on something, and I created a div element to contain everything. I made the width 100% and the height 100%. However when I do this, the div is super small and doesn't have any height. It gains height when I use pixels though. Here is my code:

body {
  background-color: #71A048;
  font-family: verdana;
}

.border {
  width: 100%;
  height: 100%;
  border: 2px solid white;
}

<div class="border"></div>

Here it is on CodePen: https://codepen.io/MAXHACKER/pen/YzwjrbZ