drag and share
  • Twitter
  • Delicious
  • Facebook
  • Digg
  • Reddit
  • Stumbleupon

Setting Equal Heights with jQuery

By: OSH Editorial    In: Design jQuery

Karma - Responsive bootstrapped webapp

Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts.

Hello you, if you are new here, you might want to subscribe to our RSS feed for updates on this article and our site.

x

When developing complex web applications or site designs we’ve found that it often makes the most sense from a usability and performance standpoint to use a simple JavaScript workaround: our equalHeights() function determines the heights of all sibling elements in a container, and then sets each element’s minimum height to that of the tallest element. When JavaScript is disabled, the boxes or columns appear with varying heights, but the content remains legible and the page is still completely usable.

See a demo here

Written by: OSH Editorial

No Bio yet...

Share this Story

If you enjoyed reading, consider sharing the love with the rest of the world.

No Comments

As you can see there are no comments, so write the first one!

Add Your Comment

Your name

May 26, 2018

We use Gravatars on OpensourceHunter, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too. Get your Gravators account here!