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:

Could you try using `viewport` units on the `body`? 100vh – sol Aug 01 '17 at 11:12 — sol, Aug 01 '17 at 11:12

Michael Benjamin · Accepted Answer · 2017-08-01T11:24:18.420

5

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.

edited Aug 01 '17 at 11:24

answered Aug 01 '17 at 11:12

Michael Benjamin

346,931
104
581
701

2

Thank you, you are right. The worst is that I did try to use `vh` like in your answer, but forgot that the total is 100 and not 1 (I put `min-height: 1vh`) - probably because of having used `fr` before (where 1 would be "all that remains") – WoJ Aug 01 '17 at 11:16

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

1 Answers1