Dynamically change div height on browser window resize

Automatically change div height to be 100% height of the browser window on resize using jQuery. This will scale the referenced div to the height of your browser viewport/document/window height. This is important for resizable or responsive websites, and particularly useful for full width/height websites or websites that have a scrolling parallax component. If you don’t want it to work on resize, just remove the resize function (second function).

 

In the +'px' you can add or subtract pixels, for example, to accommodate for another div…like your header or footer bar. Remember to set a min-height on your div if you want to maintain some sort of height if the browser window is very small.

To minus another div’s height dynamically modify the above with :