Question

I have some blocks with different heights depends on it’s content: JSFiddle.

I want to allow make height more than content’s height but not less than it.

That’s simple:

        $(".block").each(function(){
            $(this).resizable({
                 handles: 's',
                 minHeight: $(this).height()
            });                     
        }); 

but some blocks (4th in example) already have fixed height and if I use code above I can’t make this block smaller than it already is.

Is there any way to set content’s height as minHeight to avoid empty space and disallow to make block smaller than it’s content?

I have an idea to place all block’s content into another div and set it’s height as minHeight but maybe there is another way without changes in element’s structure?

[UPD] @Eopin
If I don’t want to reset heights my code looks like this:

        $(".block").each(function(){
            tmp = $(this).css('height');
            if (tmp != 'auto') {
                $(this).css('height', 'auto');
            }
            $(this).resizable({
                 handles: 's',
                 minHeight: $(this).height()
            });     
            if (tmp != 'auto') {
                $(this).css('height', tmp);
            }                               
        }); 

It works and I don’t see visual changes when script works, the speed is also normal for blocks < 50. Looks like solution.
I’ll wait a couple of days for other answers and then close my quesion.

Answer 1

Try unsetting the height property of the element by setting it to auto:

$(this).css('height', 'auto');

And if ever the blocks are using the height attribute rather than the css property, then:

$(this).attr('height', '');