Question

There are some ready JavaScript (jQuery) splitters, but they require panels height to be set. The problem is, that my website doesn’t support fixed height, it just can’t. Other thing is that this container can change it’s height dynamicly, so I’d like to this splitter to adjust to the panels height.

Is there a script or a way to avoid that?

My idea was to set container’s height the bigger panel’s height, like:

var lheight = $("#LeftPanel").height();
var rheight = $("#RightPanel").height();

if(lheight > rheight){
    $("#container").css("height", lheight+"px");
} else {
    $("#container").css("height", rheight+"px");
}

but this doesn’t seems to be a nice way for me.

Do you have any suggestions?

Answer 1

You can pass a new value to .height(), like this:

var h = Math.max($("#LeftPanel").height(), $("#RightPanel").height());
$("#container").height(h);

In this case we’re just using Math.max() to get the taller one, and setting the height to that.