CSS issue with "vh" unit of measure on mobile devices

[Charlie Veniot]

Using "100 vh" for height of things in a web page is problematic on mobile devices, because mobile web browser menus (when they appear) take up display space (either at the top or the bottom) and push the "100 vh" part of a web page out of view.

Details:  https://basicanywheremachine-news.blogspot.com/2022/12/running-basic-anywhere-machine-ide-on.html

[Charlie Veniot]

BTW, this is not an issue (that I know of) with anything TiddlyWiki.

This is just a CSS "heads-up" if you use CSS' "vh" unit of measure in anything you do that might be used in a mobile web browser..

[Télumire]

This is an issue for tiddlywiki themes/custom UI that place a searchbar at the top or bottom of the screen.

Currently the best solution is to use javascript : https://dev.to/nirazanbasnet/dont-use-100vh-for-mobile-responsive-3o97
Second best is to use min-height: -webkit-fill-available; (if calc isn't needed)
And finally, the upcoming dynamic viewport units should fix this issue: https://caniuse.com/viewport-unit-variants

There is also env() that may be usefull for this kind of things but I'm not sure how that works exactly https://developer.mozilla.org/en-US/docs/Web/CSS/env#examples

[Charlie Veniot]

Well, I don't know what makes the found solution I adopted not as good as the other ones.  If you know of any flaw in it, please advise.

I'll keep your other references in mind if I run into problems.  Thanks!

[Télumire]

Well in your particular use case it works sure, but as pointed out on the stack overflow article you linked to, writing

height: calc(100vh - calc(100vh - 100%))

Is the same as writing

height: 100%

Because it translates to 100vh - 100vh + 100%. In order to be able to use height: 100%, you must propagate that height from the root element through all the children till the target element. Sometimes it may be too difficult. A more general/reliable solution is the javascript approach I mentioned in my post.