Author: | mkfizi |
---|---|
Views Total: | 91 views |
Official Page: | Go to website |
Last Update: | March 18, 2021 |
License: | MIT |
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();