Set The Element Height To The Interior Height Of The Window – true-height.js

Preview:

Description:

When you’re creating a fullscreen (full page) element, the easiest way is to use the vh and vw units:

element {
  height: 100vh;
  width: 100vw;
}

The issue is that the height: 100vh attribute only sets your element height to the device’s size rather than the browser’s inner height.

true-height.js is a super tiny JavaScript library that makes use of the Window.innerHeight API to set the height of your element to the true height of the browser.

How to use it:

1. Load the true-height.js script into the document.

<script src=”true-height.js”></script>

2. Add the CSS class true-height to the element which should be 100% height.

<div class="true-height">
  ...
</div>

3. Initialize the true-height.js and done.

trueHeightJS();