jQuery - Set min-height of div

Question

This is probably really easy for most of you. But I'm in need of a small snippet that looks up the current height of a div (the div has a dynamic height based on the content inside it) and then set that value in the css class's min-height value.

Basically what this means is that I want this container to have it's min-height to be the exact same value as it's current height. This is probably a quick one :)

Answer 1

If I understand you correctly, you could do the following:

$(".foo").css("min-height", function(){ return $(this).height() });

Answer 2

just a proof of concept!

 // attend for dom ready
$(function() {
    // hide .foo before we get it's height
    $('.foo').hide();
    // get the height, also the one mentioned below is a good one!
    var foo_height = $('.foo').height();
    // see if the actual height respect our needs! esample 180px
    if ( foo_height > 180 ) {
        // set the height and show it!
        //$('.foo').css('height', foo_height + 'px').show(); OR try
        $('.foo').height( foo_height ).show();
    } else {
        //do something else here
        }
}

this should work as expected!

Answer 3

I have a similar problem but slightly different. I have four divs of varying heights. All four are hidden at the time of page render but I need to be able to get the min height of the div with the most content in and then set the min-height for all four of those hidden divs. (The divs are only shown once the user rolls over an image)

Could I do something like this:

var div1Ht = $(".div1").css("min-height", function(){ return $(this).height() });
var div2Ht = $(".div2").css("min-height", function(){ return $(this).height() });
var div3Ht = $(".div3").css("min-height", function(){ return $(this).height() });
var div4Ht = $(".div4").css("min-height", function(){ return $(this).height() });

Then I would compare and check which one of these have the highest value and set my min height accordingly?

Thanks ;)