Menu
Like, what are the browser limitations? If I have 99999999999999vh will it actually be 99999999999999vh or will it be something weird like 2145629vh?
775
To reiterate, VH stands for “viewport height”, which is the viewable screen's height. 100VH would represent 100% of the viewport's height, or the full height of the screen.
The full form of VH is viewport height. It works like the percentage unit as well. Specifying 10vh is equivalent to occupying 10% of entire visible screen height. If you look carefully, you can see that 50vh means 50%, which will cover half of the entire screen height.
Viewport Height (vh). This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.
Ex: The value of “1vh” will be 10 pixels (px), and the value of “10vh” will be 100px if the viewport is 1200px wide and 1000px high.
From the viewport height (vh) specification, it does not mention there is a limit of min/max value. However, in Section 5 of CSS Values and Units: Numeric Data Types, it mentions that:
CSS theoretically supports infinite precision and infinite ranges for all value types; however in reality implementations have finite capacity. UAs should support reasonably useful ranges and precisions.
and some SO users do test the limit of values of each browsers, and the results are as follow:
Firefox: 33554400px
Chrome: 33554428px
Opera: 33554428px
IE 9: 21474836.47px
and the above behavior is explained in Section 5: Distance Units:
While some properties allow negative length values, this may complicate the formatting and there may be implementation-specific limits. If a negative length value is allowed but cannot be supported, it must be converted to the nearest value that can be supported.
Hope the above can answer your question.
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
