Skip to content

Instantly share code, notes, and snippets.

@ChrisCrossCrash
Created February 7, 2022 21:23
Show Gist options
  • Save ChrisCrossCrash/cfa18501c1753df93420e9e99a756d93 to your computer and use it in GitHub Desktop.
Save ChrisCrossCrash/cfa18501c1753df93420e9e99a756d93 to your computer and use it in GitHub Desktop.
Get the equivalent of 100vh, which is not always the same as window.innerHeight (see article linked in JSDoc comment)
/** Get the equivalent of 100vh, which is not always the same as window.innerHeight (see article linked in JSDoc comment)
*
* https://developers.google.com/web/updates/2016/12/url-bar-resizing
*
* You'll also need to put this in the top-level of the `body` element:
* ```html
* <!-- See: `getFullVh()` -->
* <div style="overflow: hidden; height: 0">
* <div id="measure-vh" style="position: fixed; height: 100vh"></div>
* </div>
* ```
*/
const getFullVh = () => {
return document.querySelector('#measure-vh').clientHeight
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment