Fix the size of 'html' and 'body' elements to be exactly those of the screen

Question

I often need that html and body elements have the size of the screen. Typically, in the case when I want to have a svg element fit the whole screen.

To achieve that, I saw that it was possible to use CSS code as follow.

html,body{margin:0;padding:0;height:100%;}

The code that I personnaly use is the following one.

html {
    height: 100%;
    display: flex;
}

body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

Both seem to work well, but I recently had the following remark.

html { height: 100%; display: flex; } is a useless declaration. html height will always be calculated to fit content. Also 100% means 100% of the parent. html has no parent... also applying flexbox to html is useless as it only has 1 child element that is visible: body.

Actually:

I put 100% of html height in order to have it fit the screen height.
I apply flexbox to html in order to be able to use flex-glow: 1 on its child, and have this child filling its parent.

Is there any better to solution than mine?

Either solution is fine. That "remark" is plain wrong on all counts. — Alohci, May 12 '22 at 08:03
Interesting discussion on this topic: https://stackoverflow.com/questions/2593106/styling-the-html-element-in-css — Sigurd Mazanti, May 12 '22 at 08:17

score 1 · Answer 1 · answered May 12 '22 at 08:53

I personally use this:

html {
  display: grid;
  min-height: 100%;
}

This will make your body full height by default and will also respect default margin

html {
  display: grid;
  min-height: 100%;
  background: blue;
}

body {
  background: red;
}

And you can easily use height:100% on an inner element without issue:

html {
  display: grid;
  min-height: 100%;
  background: blue;
}

body {
  background: red;
}

.box {
  height: 100%;
  border: 5px solid green;
  box-sizing: border-box;
}

<div class="box"></div>

score 0 · Answer 2 · answered May 12 '22 at 08:28

I find that whenever working with elements that need to be the full height of the screen height: 100vh is usually a good place to start. VH = viewport height. I use it over height: 100% as depending on the layout 100% doesn't always equal the page height, so with VH you know exactly what you are getting!

With VH you can also then use a calc() in your CSS, so if you needed your body to fill the whole height of the page, but subtract the height of a header for example you could do something like this:

<header style="height: 64px">
<section style="height: calc(100vh - 64px)"

Fix the size of 'html' and 'body' elements to be exactly those of the screen

2 Answers2

Linked