Added lvh, svh, dvh, lvw, svw, and dvw units.
See #4329 (comment) and #4329 (comment) for more details. 🎉
Original content below:
Backgroundvh is defined as Equal to 1% of the height of the initial containing block. Perhaps the current behaviour 1 2 could also be defined as
Equal to 1% of the height of the initial containing block with user agent chrome minimized.
In other words, on devices where the browser chrome changes size (e.g. mobile devices), 100vh is actually larger than the viewport when the browser chrome is maximized, and thus overflows.
A brief history of the vh unit is outlined here #4329 (comment)
vhc (c = "with chrome", but it could be something else) could be defined as
Equal to 1% of the height of the initial containing block, with user agent chrome maximized
On devices without a changing chrome size (e.g. desktop devices), 1vh === 1vhc.
Pros and Cons list for each proposal
Original content of this section:
A drawback of vh units is that content will be cut off when (1) you load a page and (2) when you scroll upwards, while the content fits when you scroll down and the chrome is minimized.
The vhc unit would be the inverse: content would fit the page when (1) you load the page and (2) when you scroll upwards, but you would see additional content (or whitespace, depending on the implementation) when the chrome is minimized.
It also would provide a better experience than vh for games and other full-screen content that doesn't or shouldn't scroll at all.
In the end, this proposal does not completely solve the issue of 1vh needing to be different values at different times. However, it does at least give the developer a choice in which value that they want to use.
(For what it's worth, my personal preference is that I would end up using vhc units for responsive designs, because I would rather have additional content visible or some whitespace added, rather than have content cut off and not visible.)
And a breakdown of the pros and cons of each proposal so far
Current WorkaroundsAs it stands, web developers that want to have a full-height website are either reliant on javascript 1 2 3 to get vh units to not cut off content, or just tend to avoid 1 using vh units altogether.
This is my first time proposing, so if I did something wrong or need to improve something please let me know! Thank you for your patience. :)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3