Instead of 100% height on body and html it would be better to set just body to min-height: 100vh.
100% height on html can break your content rendering with background images, or some other effects because the longer content flows out of the html area if you have to scroll down.. :)
Unfortunately, min-height: 100vh has a problem as well: on mobile browsers (e.g. Chrome) viewport height does not consider if the address bar is shown or not. So, when address bar is expanded, it will cause an y-overflow with this sticky footer solution even though your content would fit on page (because it ends up with address-bar-height + 100vh).
Best solution for me has, so far, been to use the grid solution if browser support is not a concern or make your design work without a sticky footer.
Instead of 100% height on body and html it would be better to set just body to min-height: 100vh.
100% height on html can break your content rendering with background images, or some other effects because the longer content flows out of the html area if you have to scroll down.. :)
Unfortunately,
min-height: 100vh
has a problem as well: on mobile browsers (e.g. Chrome) viewport height does not consider if the address bar is shown or not. So, when address bar is expanded, it will cause an y-overflow with this sticky footer solution even though your content would fit on page (because it ends up withaddress-bar-height + 100vh
).Best solution for me has, so far, been to use the grid solution if browser support is not a concern or make your design work without a sticky footer.
Oh ok. I didn't think about that. But now i see.
Yes Grid is nice and solves many problems. :)