Height:100% VS Min-Height:100%

height:100% VS min-height:100%

Here's an explanation from the W3C (link):

The following algorithm describes how the two properties [min-height and max-height] influence the used value of the 'height' property:

The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.

If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.

If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.

To summarize: Basically, if the min-height is greater than what the height would otherwise be (whether an explicit height is specified or not), then the min-height is used as the height. If the min-height is less than what the height would otherwise be, then the min-height has no effect.

For the specific case you give, specifying height:100% makes the height of the element equal to the height of the containing block. (However this could potentially be overruled, for instance if you also specified max-height:50%.) Specifying min-height:100% means that if the computed height is less than 100%, in fact even if you explicitly specified a height less than 100%, it is treated as if you said height:100%. Note that one key difference is that max-height can overrule height but cannot overrule min-height (because max-height is considered after height but before min-height according to the W3C recommendation as quoted above).

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

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.

height: 100% or min-height: 100% for html and body elements?

If you're trying to apply background images to html and body that fill up the entire browser window, neither. Use this instead:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

My reasoning is given here (where I explain holistically how to apply backgrounds in this manner):

Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.

The first way, using height: 100% on both, prevents body from expanding with its contents once they start to grow beyond the viewport height. Technically this doesn't prevent the content from scrolling, but it does cause body to leave a gap beneath the fold, which is usually undesirable.

The second way, using min-height: 100% on both, doesn't cause body to expand to the full height of html because min-height with a percentage doesn't work on body unless html has an explicit height.

For the sake of completeness, section 10 of CSS2.1 contains all the details, but it's an extremely convoluted read so you can skip it if you're not interested in anything beyond what I've explained here.

CSS - Height: 100% vs min-height: 100%;

If all you need is a sticky footer that doesn't cover up any of the body's content then just give the footer a fixed position and give the bottom of the body padding equal to the footers height.

body{ 
    padding-bottom:200px;
}

#footer { 
    position: fixed;
    bottom:0;
    height: 200px;
    width: 100%;
}

EDIT:

if your concern is that on very small screens the fixed footer covers up most of the screen then there is no workaround for this except for maybe hiding the footer dynamically using css media queries or javascript.

many mobile browsers do not support fixed positions precisely because of the issue of them covering large portions of the screen.

How to make body take 100% min height and height as auto

body { min-height: 100vh; } is all you'll need.

---

Related Topics