Fillerup makes the height of all selected elements exactly equal to the height of the browser window. With the ability to define min and max height as well as a subtracted value.

Demo

See the Original Pen at Codepen.

Features

  • Set height on elements to match the exect height of the browser window
  • Minimum and maximum height
  • Responsive, automatically updates on window resize
  • Give room for navigation or similar by defining a pixel value to subtract from the height
  • Tested in IE9+, Chrome, Firefox, Chrome Android

Install

jQuery is required, so include it first.

Download jquery.fillerup.js and include the script in your HTML file:

	<script src="jquery.fillerup.js" type="text/javascript"></script>

Or install using Bower

	bower install fillerup

Usage

	$(elements).fillerup();

See the included test.html for a working example.

Examples

$(function() {
  $('.hero').fillerup();
});

Will set all elements with the class hero to the height of the browser window.

See the included test.html for a working example.

Find the source code here on Github.