Set Element Height To 100% - jQuery fullHeight.js
File Size: | 2.98 KB |
---|---|
Views Total: | 5443 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.