Adjust The Page Height Relative To Device - jQuery JsHeight

JsHeight is a jQuery plugin that enables you to adjust the height of a container element relative to the screen size of the user's media.

How to use 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 element using the data-height attribute. The target element must...

• Have a unique id
• Be inline-block
• Have the data-height attribute

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

4. More data attributes to control the height of the element.

• data-height: When declared as full, the plugin will set the element's height to fullscreen.
• data-resize: Updates the element's height when browser resizes. [e.g data-resize="resize"]
• data-minh: Minimum height of the target element. This will overwrite the data-resize attribute when the minimum height is reached. [e.g data-minh="100"]
• data-maxh: Maximum height of the target element. This will overwrite the data-resize attribute when maximum height is reached [e.g data-maxh="100"]
• data-inc: Increases the element's current height. [e.g data-inc="100"].  
• data-dec: Decreases the element's current height. [e.g data-dec="100"].
• data-auto: Automatically monitors the height of the inner content of the target element.

<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");
  }
}

---

This awesome jQuery plugin is developed by teymzz. For more Advanced Usages, please check the demo page or visit the official website.