• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

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?

about 3 years ago · Santiago Trujillo
2 answers
Answer question

0

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>

about 3 years ago · Santiago Trujillo Report

0

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)"
about 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error