title: Javascript get 100vh in pixels
body: <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div style='height:4000px;background:#EEE;'&gt;
              &lt;div id=vh style='height:100vh;background:#AFB'&gt;
                  100vh
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;button onclick='show()' style='font-size:55px'&gt;
                      Show
                  &lt;/button&gt;
              &lt;/div&gt;
              more stuff
          &lt;/div&gt;
          &lt;script&gt;
              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)
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://curtastic.com/testvh.html" rel="noreferrer">http://curtastic.com/testvh.html</a></p>
  
  <p>On my iPad the 100vh div size is 1256 pixels. (if your most recent scroll was upward)</p>
  
  <p>window.innerHeight is 1217.</p>
  
  <p>screen.height is 1024.</p>
  
  <p>window.outerHeight is 0.</p>
  
  <p>documentElement.clientHeight is 4016.</p>
  
  <p>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?</p>
  
  <p>I also have my font size set to 10vh. What is that exactly in pixels?</p>
  
  <p>I am not using jQuery.</p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/T43I6.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/T43I6.jpg" alt="enter image description here"></a></p>