How to make use of it:

1. Install the plugin in your web project.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/jsHeight.js"></script>

2. Initialize the plugin.

loadHeight();

3. Adjust the height of the target factor utilizing the data-height attribute.

<div id="example" data-height="full">
  ...
</div>

4. More data attributes to manage the height of the component.

<div id="id1" data-height data-full data-auto="true" data-resize="resize" data-minh="screen" data-maxh="screen" data-inc="65"></div>
<div id="id2" data-height='full' data-auto="true" data-resize="resize" data-minh="screen" data-maxh="screen" data-inc="65"></div>
<div id="id3" data-height data-resize="resize" data-minh="screen" data-maxh="screen" data-dec="65"></div>
<div id="id4" data-height data-resize="resize"><div data-watch=""></div></div>

5. Override the default configs.

function heightFull() {
  if ($(".height-full").length > 0) {
    jqHeight({ 
      minHeight: false,
      maxHeight: false,
      reduceHeightBy: 0,
      increaseHeightBy: 0,
      autoHeight: false,
      autoResize: false,
      fullHeight: false,
      thisElement: this,
      autoHeightFix: 0
     }, ".height-full");
  }
}

See Also –

Creating Page Scroll Animation With Pure JavaScript | ScrollTrigger
A Lightweight JavaScript Library That Specifies The Height Of The Element | true-height.js
Animated Product Landing Page Designed with Bootstrap, jQuery & JavaScript

See Demo And Download