Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
So how really do you get the height of the longer div and apply it to another so that they would have equal height?
Assuming you’re using jQuery in your little web page, follow me on this short walkthrough:
var $longerDiv = $(‘#long-div’).height();
This line creates a variable named “$longerDiv” and it gets the pixel height of the #long-div element in your HTML mark-up.
[code lang=”js”]var $longerDiv = $(‘#long-div’).height();[/code]
And this one applies that number (without the “px”) into the css property, “min-height” and we add “px”.
[code lang=”js”]$(‘#short-div’).css(‘min-height’, $longerDiv+"px");[/code]
Check out the demo on jsFiddle: http://jsfiddle.net/8WDWf/
There might be a better way in doing this — hit up the comments!
Other code-testing sites on CSS-Tricks: http://css-tricks.com/seriously-just-make-a-jsfiddle/