Set Element Height To 100% - jQuery fullHeight.js

File Size: 2.98 KB
Views Total: 5072
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Set Element Height To 100% - jQuery fullHeight.js

fullHeight.js is a really simple jQuery plugin that sets your element (for example Div, Section, etc) 100% height of browser window whenever you resize the window. A great alternative of CSS height: 100vh property for old browser.

How to use it:

1. Assume that you have several content sections within your document as follows:

<section class="full-height">
  <h1>First section</h1>
</section>

<section class="full-height">
  <h1>Second section</h1>
</section>

<section class="full-height">
  <h1>Third section</h1>
</section>

<section class="full-height">
  <h1>Fouth section</h1>
</section>

...

2. Download the plugin and insert the minified version of the jQuery fullHeight.js plugin after jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="fullHeight.js"></script>

3. Attach the plugin to the content sections and you're done.

$(document).ready(function() {
  $('.full-height').fullHeight();
});

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