So this is a bit of a heated topic isn’t it?! Whilst I applaud your ingenuity I’d be careful about doing this kind of thing with JsS, or as some users suggest, doing a calc- because that assumes you know the height of that element.
This is a good option if you DONT need to use css Calc() function
ex:
body {
min-height: calc(100vh-70px);
/* mobile viewport bug fix */
min-height: -webkit-fill-available;
}
The webkit solution would not take into account the 70px adjustment
I've used the JS solution described in this post and it seems to be the best available option at the moment (until the new dynamic viewport units are adopted)
Exploring the new tools and techniques on frontend development. Loves to meet up with new people and participate in the community. I do interesting stuff on codepen https://codepen.io/nirazanbasnet
So this is a bit of a heated topic isn’t it?! Whilst I applaud your ingenuity I’d be careful about doing this kind of thing with JsS, or as some users suggest, doing a calc- because that assumes you know the height of that element.
Instead use -webkit-fill-available
Here’s some more information about that css rule: allthingssmitty.com/2020/05/11/css...
This situation is far from ideal and I know the Safari team are working hard to address these issues so they don’t become “the next IE”.
This is a good option if you DONT need to use css Calc() function
ex:
body {
min-height: calc(100vh-70px);
/* mobile viewport bug fix */
min-height: -webkit-fill-available;
}
The webkit solution would not take into account the 70px adjustment
I've used the JS solution described in this post and it seems to be the best available option at the moment (until the new dynamic viewport units are adopted)
Thanks for using this solution 👍