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

Question

I would like to create a site that has a fixed header, variable content and a footer that is at the bottom when the page is not full. I will use CSS Grid Layout for this.

Expanding a content item when 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> 

Then I tried to reproduce this in a full-screen browser, and I don’t know how to tell the application "height is the size of the browser if there is not enough content, otherwise it is content." I thought min-height: 100%; applied to body will 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 correct grid, but the size of the body is not the whole height of the browser:

Answer 1

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

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

From the specification:

5.1.2. Percentage of video vmin length: units vw , vh , vmin , vmax

The percentages in the viewport refer to the size of the initial containing block. When the height or width of the initial containing block changes accordingly.

• vw unit - equal to 1% of the width of the original containing block.
• vh unit - equal to 1% of the height of the original containing the block.
• vmin unit - equals less than vw or vh .
• vmax unit is equal to more than vw or vh .