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

Question

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:

Answer 1

Instead of min-height:100%, use min-height: 100vh.

Percentage heights are tricky, as they often require a defined height on the parent element (full explanation).

From the spec:

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

• vw unit - Equal to 1% of the width of the initial containing block.
• vh unit - Equal to 1% of the height of the initial containing block.
• vmin unit - Equal to the smaller of vw or vh.
• vmax unit - Equal to the larger of vw or vh.