Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS how do i dynamically set the height of a div to another div? Re: how do i dynamically set the height of a div to another div?

#61848

I’m with falken on this one,

Go with a javascript solution. However for the most solid results i’d just hook up jquery and let it take care of the issue.

Code:
$(function() {

var height = $(“#original”).height();
var origHeight = $(“#dynamic”).height();

/*
I am taking the height of the box to match, subtracting the height of the
dynamic box, and using the value as top-padding to push the content to the
bottom. I am also adding an extra 10 to the equation because the boxes naturally
have 10 pixels padding, because I was being fancy and trying to make the demo look nice. -.-
*/
$(“#dynamic”).css(“padding-top”, (height-origHeight + 10) + ‘px’)

});

I’ve uploaded a quick example using JQuery, (if you are unfamiliar with it that is). I’m also definately no JS/Jquery pro but this seems to be a fairly easy way to get div’s to auto match, which is going to work over pretty much every browser.

example: http://ninjafocus.com/sandbox/jquery_ma … ights.html

edit: quick tweak to my code, to make it bottom aligned ;p