100% height using jQuery

2016 Edit: This post is really out-dated. If you are looking for a solution for 100% height divs, please use modern css as described here http://www.mikedoesweb.com/2016/modern-100-percent-height-css/

I few years ago, I wrote a post about forcing two divs to be equal height — quite a feat if you’ve ever tried! ┬áSince then, a great jQuery plugin has came out that makes equal div height pretty easy to accomplish.

Using the plugin jQuery.equalHeight, it is as simple as:

Try out a live demo.

Of course, you should make your decision to use this method carefully. It’s quick and easy, but if your aren’t using jQuery already, is it worth the load time for this fix? If you want to check out a non-jQuery solution, check out this vanilla JavaScript solution.

JS Bin

Author: Michael Jasper

Michael is a Web Developer located in Northern Utah. When not programming, he enjoys spending time with his family, exploring the great-outdoors, and hit-and-miss cooking experiments.

  • Steve Adams

    Thanks. FYI, your reference to jquery.equalheights.js in the Fiddle is now broken

    ForbiddenYou don’t have permission to access /examples/equalHeights/jQuery.equalHeights.js on this server.

    • mdjasper

      Thanks Steve! The plugin I was referencing has been updated by its author, and I the fiddle now references the most recent version.

  • You guys look cute..

  • Al

    Hi man, I have tried the best out of it but it is not working even the live demo that you have! I would really appreciate it if you have a look again! thanks!

  • adrian

    usefull piece of information,
    Thank You Michael!