css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

This pattern is a fork of a CSS Tricks Post

To adapt this pattern for responsive use I placed it into a function and called it each time the window was resized. One note is that you must reset the div heights before you take a new measurement.

Pros

The Equal Height Rows Designers Crave - If a desiger uses a box, those boxes better line up or they lose their Adobe license. Really!

Seperate heights for each row - Each row's height is calculated seperately, which works better for multi row layouts.

Light - This is a pretty short script and could be omitted from your mobile, one column layout.

Comments

  1. Great fork Micah. I've been struggling with the various incarnations of the CSS-Tricks equal height divs in a row for awhile. The problem I'm having with my framework is inaccurate heights in different rows. Essentially row one is picking up the height of row two and not that of its content. I tried replicating the issue in a forked pen of my own here, http://codepen.io/Fatbat/pen/nFoBh, but to no avail, the example works fine. However, you can see the issue on my demo site here, http://resdivina.com/master-test/ where rows 2, 3 and 4 are the correct heights, but row 1 is the height of row 2 and row 5 is the height of row 4. The divs that are supposed to be equal are red. Any help would be greatly appreciated!

  2. It appears to be something with the javascript logic not recognizing a new row has been started. As that part was borrowed, I'm not 100% sure where the problem is occurring.

  3. I would suggest just not doing equal height on that header and footer. It appears you would be fine with a fixed height there.

  4. It's not so much about what would be good for the header and footer in this particular design, this is simply my demo site to test various features and plugins before I use them elsewhere. I just can't get my head around what's different about the header and footer from the other rows. Yesterday the row that has the "blurb" and the button in it was mimicking the other rows and now it isn't, and I don't know what changed. Very frustrating.

    Thanks for looking.

  5. The js loops through all of the elements and groups them off by their distance from the top of the page. Somewhere in the loop the logic must be breaking down. Good luck. The test site is looking good.

  6. @Fatbat did you have any more success with this? I actually found situations where adjustments needed be made for this to work.

  7. My browser renders three columns with the same % values. I don't understand why.

  8. @because can you give me more details? Are you talking about your browser viewing my code, or are you trying to implement this on your own site?

  9. Good work, Micah. I was looking for a way to make my responsive site to have equal height. I found that post on CSS Tricks too. But the problem with that solution is, it didn't work if there's no fixed height set for any divs, while the heights on my site is generated by the contents (by setting it with min-height). When I resized the window, the contents are flowing out of the container. I have to refresh the page on the new window size to make it back to normal (the content back to the container).

    Then I found your fork here. It works well on my case. Thank you very much, Micah :-)

  10. @dhy-ange you're welcome! I'm glad it worked for you.

  11. Hi Micah, i've turned your code into a little jquery plugin http://codekipple.com/conformity

  12. @ralcus Thanks, I was looking for a way to use min-height. Your plugin helped me out.

  13. Game changer! I <3 this so bad. Thanks for this!!

  14. An extremely helpful code snippet. Thank you for sharing!

    Here are some suggestions and fixes on the code. You can check out my fork here.

    Use "use strict"

    Line 6#: Add equalheight function to a variable: var equalheight = function(... or bind to the window object (not recommended): window.equalheight = function(

    Lines #16, #18, #23: topPostion should be renamed to topPosition

    Line #15: There's no need to wrap the $el in a $() object since it is already a jQuery object.

    Line #18: Better use !== operator rather than !==

    Lines #20, #31: Add a var before initializing currentDiv in the for loops.

    Lines #36-#43: jQuery(window).load() and resize() can be chained together like so:

    $(window).on("load resize", function(){
      equalheight('.main article');
    });
    

    ...thus reducing the code.

    ;)

  15. @micah - ran across you in my twitter feeds via a retweet :) There's actually no need for JS with this (assuming you can deal with the browser support IE 10+):

    http://codepen.io/ritcheyer/pen/jWyELL?editors=110

    Here's flexbox: http://caniuse.com/#feat=flexbox

    Alternatively, keep the JS around for ye olde browsers behind an "if IE" conditional comment. :)

    I assume you're familiar with all of since this Pen was ... penned in 2012 :)

  16. @micahgodbolt - Very helpful script Micah! Thanks for sharing this.. helped me a lot on different projects. I am having some difficulties implementing this on my current project. it's a tabbed layout page, each tab has the blocks inside which needs equal height. At first when page loads, equal heights script is working absolutely fine but when we click on another tab, it doesn't trigger the equal height script (height shows 0px) for the clicked tab contents, and if we re-size the window after this, it will trigger the script and looks fine. I am not good at javascript so can not figure out how to fix this and trigger the script for each tab clicked. Can you please advice on this issue? Thank you in advance for your help!!

  17. Excellent! Most reliable equal heights JS yet. Still not 100% (on rare and random refreshes of page, heights of all elements collapse), but definitely the best and least 'jerky' found yet! Till CSS flexbox and grid become fully supported, this will do me. Thanks for sharing.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...