22
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div style='height:4000px;background:#EEE;'>
            <div id=vh style='height:100vh;background:#AFB'>
                100vh
                <br>
                <br>
                <br>
                <button onclick='show()' style='font-size:55px'>
                    Show
                </button>
            </div>
            more stuff
        </div>
        <script>
            var vh=document.getElementById('vh')
            function show()
            {
                alert('window.innerHeight='+window.innerHeight
                +', window.outerHeight='+window.outerHeight
                +', screen.height='+screen.height
                +', document.documentElement.clientHeight='+document.documentElement.clientHeight
                +', vh.clientHeight='+vh.clientHeight)
            }
        </script>
    </body>
</html>

http://curtastic.com/testvh.html

On my iPad the 100vh div size is 1256 pixels. (if your most recent scroll was upward)

window.innerHeight is 1217.

screen.height is 1024.

window.outerHeight is 0.

documentElement.clientHeight is 4016.

Is there any way in javascript of getting this number 1256? Besides making a div and setting it to height:100vh then checking its clientHeight?

I also have my font size set to 10vh. What is that exactly in pixels?

I am not using jQuery.

I know that 100vh is taller than the visible viewport on purpose on mobile so that the browser bars can change size without altering vh. So I want the size of the screen regardless of the browser bars, which is what vh does.

enter image description here

8
  • 2
    It should be documentElement.clientHeight; it is for me. Not sure how you're getting 4016 there... Mar 14, 2018 at 2:05
  • 1
    I'm also getting 4016 on chrome and firefox on windows.
    – Curtis
    Mar 14, 2018 at 2:07
  • 1
    Why was this down voted?
    – Curtis
    Mar 15, 2018 at 19:59
  • I didn't down-vote myself, so can't say for sure, but I guess it was because others couldn't replicate the problem? Like I say, I can't replicate the problem myself; documentElement.clientHeight gives the correct results for me. Maybe try providing a minimal, complete, and verifiable example in the question itself and confirm the problem still exists there? :) Mar 15, 2018 at 20:13
  • 1
    Can you update your page to also show window.document.body.clientHeight ? Apr 6, 2018 at 11:49

5 Answers 5

17

You can calculate vh in pixels with a line of code:

let _1vh = Math.round(window.innerHeight / 100)

So you can have a function for it:

function vhToPixels (vh) {
  return Math.round(window.innerHeight / (100 / vh)) + 'px';
}
4
  • 2
    document.documentElement.clientHeight is way taller than the screen and is unrelated to vh. It's as tall as the content of the page.
    – Curtis
    Apr 16, 2018 at 17:31
  • No that doesn't exist
    – Curtis
    Apr 17, 2018 at 3:59
  • Works great, for width too.
    – Dror Bar
    Aug 4, 2020 at 9:33
  • 2
    This isn't true for mobile devices, where window.innerHeight changes as the URL bar appears and disappears. In contrast, 100vh is the viewport height when the URL bar is hidden. Here's a nice article from the Google developers about it. Feb 7, 2022 at 21:35
7

You can use offsetHeight or clientHeight to get the height of an element in px.

The offsetHeight property returns the viewable height of an element in pixels, including padding, border and scrollbar, but not the margin.

The clientHeight property returns the viewable height of an element in pixels, including padding, but not the border, scrollbar or margin.

See the difference

var vhele=document.getElementById('vhele')
function show()
{
    console.log(' clientHeight='+vhele.clientHeight+ 'px'+' , Height with padding and border= ' + vhele.offsetHeight + 'px' );
}
body{
margin:0;
}
#vhele{
  padding:15px;
  border:5px solid red;
}
<div id="vhele" style='height:75vh;background:#AFB'>
                100vh
                
                <button onclick='show()' style='font-size:55px'>
                    Show
                </button>
</div>

1
  • It looks like this is the only way. Always have an invisible div with height:100vh;width:0;position:absolute; and check its clientHeight.
    – Curtis
    Apr 16, 2018 at 17:35
3

I know that 100vh is taller than the visible viewport on purpose on mobile so that the browser bars can change size without altering vh. So I want the size of the screen regardless of the browser bars, which is what vh does.

This is important context that shouldn't be ignored. window.innerHeight does not always give you the height of an element with a height of 100vh. window.innerHeight changes as the URL bar appears and disappears. In contrast, 100vh is the viewport height only when the URL bar is hidden. Here is a nice article from the developers at Google about this subject.

I've come up with a solution that works for me. The best way to get the height of an element with a height of 100vh is simply to create that element and measure it.

<!-- See: `getFullVh()` -->
<div style="overflow: hidden; height: 0">
 <div id="measure-vh" style="position: fixed; height: 100vh"></div>
</div>

And then in your JavaScript:

/** Return the "largest possible viewport" height in px.
 *
 * What is the "largest possible viewport" height?
 * https://developers.google.com/web/updates/2016/12/url-bar-resizing
 */
const getFullVh = () => {
  return document.querySelector('#measure-vh').clientHeight
}

I also have my font size set to 10vh. What is that exactly in pixels?

Using getFullVh():

const tenVh = getFullVh() * 0.1
2
+25

Is it because your missing this in a

 <head> 

tag?

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
3
  • No. Okay I added that to the example page code and I still have no way of getting how tall 100vh is.
    – Curtis
    Apr 16, 2018 at 17:29
  • After adding the above code in between the head tags in your html, using window.document.body.clientHeight should now give you the 100vh equivalent in pixels.
    – user6434796
    Apr 17, 2018 at 17:58
  • Well it doesn't work. I updated the screenshot, and the code display. The working link was already updated to have the meta tag.
    – Curtis
    Apr 17, 2018 at 21:56
2

The problem with most of the solutions is that window.innerHeight, screen.height, window.outerHeight, documentElement.clientHeight and so on are not reliable measures of the browser page size. The best way I've found is to create a rule yourself

const rule = document.createElement('div');
rule.style = 'width:0; height:100vh; position:fixed;';
insertAfter(someOtherElement, rule);
// Then you can use rule.clientHeight with a formula like
const vhToPx = (vh)=>(rule.clientHeight / (100 / vh)) + 'px'

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.