Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the min/max of vh units?

Tags:

css

Like, what are the browser limitations? If I have 99999999999999vh will it actually be 99999999999999vh or will it be something weird like 2145629vh?

like image 775
corysimmons Avatar asked Jan 13 '16 02:01

corysimmons


People also ask

What is VH height?

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.

What are VH units in CSS?

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.

How is VH calculated?

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.

How many pixels is 1vh?

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.


1 Answers

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.

like image 79
Raptor Avatar answered Sep 29 '22 10:09

Raptor