Setting height:100vh vs min-height:100vh;

Question

I am building an app where I noticed, that if I set the background on the html, set height: 100vh and resize the viewport so that the content overflows vertically, then the background won't cover the overflowed content:

html {  
    height:100vh;
    font-size:62.5%;
    background:radial-gradient(at top, hsl(214, 47%, 23%), hsl(237, 49%, 15%));
    background-repeat:no-repeat;
}

If I then set the height to min-height:100vh. The overflowed content will still have the background, which is what I want. I would just like to know why this happens

html {  
    min-height:100vh;
    font-size:62.5%;
    background:radial-gradient(at top, hsl(214, 47%, 23%), hsl(237, 49%, 15%));
    background-repeat:no-repeat;
}

I'm not very sure why, but `min-height` means that the minimum height _has_ to be 100vh, but apparently `height` doesn't require this. So, `min-height` will always be at least 100vh. — Anvay, Nov 25 '20 at 11:07
This page might help: https://stackoverflow.com/questions/37191672/100vh-doesnt-take-whole-screen It says that there is a default 8px margin on the HTML element? I'm not sure if this applies to you, but yeah. — Anvay, Nov 25 '20 at 11:09
Why? Because a _fixed_ height, and a _minimum_ height, are simply two different things? With `height:100vh` you say, the element should always have that height - no more, no less. If the content extends for more than that on the y axis - then it _overflows_ the boundaries of the element. And outside of an element, no background formatting applies, because there _is_ no “background” of the element there. — CBroe, Nov 25 '20 at 11:11

abrosis · Accepted Answer · 2020-11-25T11:16:58.770

Without access to code, generally speaking, min-height is the minimum height an element can be, which therefore can be bigger but not (technically) smaller.

Height is the absolute height something should be. No bigger, no smaller (in most cases).

As you've used 100vh (100% of the viewports height):

height: 100vh

The HTML element will be exactly 100% of the browser windows size (not the size of the content or how long the page is).

min-height: 100vh

The HTML element will be at least 100% of the browsers height...but can be bigger.

Try using percentages or overflow to correct this if needs be. Overflow:auto on the element will mean the overflowing content will be scrolled within the the blue area. Height: 100%; should mean that the blue will appear across the whole page...but it depends on your code.

Setting height:100vh vs min-height:100vh;

1 Answers1