How to force body to be the size of the screen when partially filled in?

I would like to build a site where there is a fixed header, a variable content and a footer which is at the bottom when the page is not completely filled in. I will use the CSS Grid Layout for that.

Expanding the content element when the height is known is easy:

div {
  border-width: 1px;
  border-style: solid;
}

#container {
  width: 200px;
  height: 200px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

<div id="container">
  <div>hello </div>
  <div>world</div>
  <div>three</div>
</div>

I then tried to reproduce this on a full window browser and I do not know how to tell the application "the height is the size of the browser if there is not enough content, otherwise this is the content". I thought that min-height: 100%; applied to the body would be fine - but it is not:

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr auto;
    min-height: 100%;
}
.navbar {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
}
.main {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
}
.toc {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}
.footer {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 3;
}

This code creates the right grid, but the size of body is not the whole height of the browser: