'Javascript get 100vh in pixels

<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

javascriptcss


Solution 1:[1]

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';
}

Solution 2:[2]

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>

Solution 3:[3]

Is it because your missing this in a 

 <head>

tag?

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

Solution 4:[4]

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

Solution 5:[5]

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'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Ryan Breece
Solution 4 ChrisCrossCrash
Solution 5 Mr. Jhon I.

Related Questions