Sticky footer example doesn't mention html height 100%

[kylegordy]

Not really a bug, but you might want to mention in your Sticky Footer Example that you also have to set the height of the HTML element to 100% (like you do here) in order for this to work. That detail was tripping me up for second.

Anyways, love the site! Thanks to everyone who put it together 🙌

[JackCrompton]

Just adding to this, the height of the body element must also be 100%

[kylegordy]

Hmm, that wasn't the case on my project. html {height: 100%;} did the trick just fine 🤔

[mrFleshka]

Also in page in section The CSS You have CSS:

  min-height: 100vh;

But in source you use

  height: 100%;

[arechsteiner]

you also have to set the height of the HTML element to 100%

Thanks @kylegordy, I thought I was losing my mind.

[philipwalton]

@mrFleshka you can read this article for some context on the difference: https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

[mrFleshka]

@philipwalton and there is nothing about vh vs % I understand height/min-height, but i dont understand why you show in code snippet one version and use another (and show how it really work, like example).