Press "Enter" to skip to content

A Lightweight JavaScript Library That Specifies The Height Of The Element | true-height.js

true-height.js is a lightweight JavaScript library that specifies the height of the element to be equivalent to the height of the internal browser.

When you set your landing page height to 100vh, it will adjust the landing page height to the device screen size without taking into account the height of the internal browser. This library will fix this issue so that the landing page height is constantly set to the internal browser height. However, the landing page will be set to the height of its content if its value is greater than the height of the browser.

How to make use of it:

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

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

2. Add the CSS class true-height to the factor which must be 100% height.

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

3. When creating a full screen (full page) item, the easiest way is to use the modules vh and vw:

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

4. Initialize the true-height.js and accomplished.

trueHeightJS();

Set The Element Height To The Interior Height Of The Window, true-height.js Plugin/Github


See Demo And Download

Official Website(mkfizi): Click Here

This superior jQuery/javascript plugin is developed by mkfizi. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.