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.
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…
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 : Don't use 100vh for mobile responsive - DEV Community 👩💻👨💻
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: Large, Small, and Dynamic viewport units | Can I use... Support tables for HTML5, CSS3, etc
There is also env() that may be usefull for this kind of things but I’m not sure how that works exactly env() - CSS: Cascading Style Sheets | MDN
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!
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.