How do I convert a height of an element given in vh to pixels?

Sudharsanan picture Sudharsanan · Aug 22, 2013 · Viewed 46.2k times · Source

I have the max-height of an element as 65vh. I need to convert it to pixels in my JavaScript to see whether an image can fit there or if I need to shrink/crop it. (am doing win8 App development).

Will this work?

100 vh = screen.height therefore 65vh in pixels is screen.height *0.65

Answer

rink.attendant.6 picture rink.attendant.6 · Aug 22, 2013

Not necessarily screen.height * 0.65, but viewport.height * 0.65. Even though a Windows 8 app will always have the same height, regardless of the snapped state, this is an important difference in browser-based applications.

In JavaScript:

document.documentElement.clientHeight * 0.65;

If you're using jQuery, you can do:

$(window).height() * 0.65;