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.
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. :)