6

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

corysimmons
  • 7,296
  • 4
  • 57
  • 65
  • 1
    It's [a percentage of the viewport size](https://www.w3.org/TR/css3-values/#viewport-relative-lengths). I guess that you could theoretically have an element size that is many (thousand?) times the height or width of the viewport, without limit, but I don't know what the practical purpose of this would be. I think it's a question about how a browser would handle really big elements rather than a limitation of the unit itself. – Vince Jan 13 '16 at 02:34

1 Answers1

10

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.

Community
  • 1
  • 1
Raptor
  • 53,206
  • 45
  • 230
  • 366
  • 2
    I wish I could vote this up twice. Well researched answer! :) – Vince Jan 13 '16 at 02:36
  • I find it odd how the maximum difference between Chrome and Firefox is 28px. I wonder how they decided on that seemingly arbitrary value. Great answer. – Josh Crozier Jan 13 '16 at 02:44
  • @JoshCrozier Don't FF & Chrome have differing versions of what consititues 100vw...one includes the scrollbar and the other doesn't? Could that be it? I would assume that they merely set the max vh to the same as the vw max pixel value. – Paulie_D Jan 13 '16 at 12:46