How to resize height of parent container (say DIV) using JQuery

Question

I am struggling on the following objective (I am a new bee to JQuery).

I would like to have a parent container (say DIV) to increase its height automatically when any (or all) of its child controls resizes. The DIVs may contain both inline and absolutely positioned elements (even relatively).

In other words, the container should automatically expand its height to include all of its children at any moment.

I am frustrated with CSS hacks (along with "clearfix") and wanted to go with JQuery (looks much promising than CSS).

How can I achieve this using JQuery.

Answer 1

It's kind of a perculiar question, because you're asking one thing but the secondary solution you mention indicates you're actually trying to fix a different problem.

A parent div should naturally expand to fit its containing elements, if they aren't it's usually an indication that something else has gone wrong - in your case, when you mention 'clearfix' it suggests you're using floats inside the parent and it's not extending past its children anymore.

Does this sound about right? If that's so then you may find the overflow method more useful than trying to do something like this with jquery.

see here: clearing floats with overflow

Answer 2

First of all, thanks for your explanation. You are right.

I think, I confused everyone here. I do not have any floats (even though I tried clearfix with wrong scenario).

I know that something is going wrong. I am unable to find it. I am unable to post the HTML here as most of it is server generated and highly complex to edit and make simple.

All I am trying to achieve now is to increase height of parent most DIV to enclose all of its children using JQuery.

Can you help me on this.

Answer 3

You can always use the ready function to change the height of a div by using the 'css' height. Something like this:

             $(document).ready(function() {
       var $optionDiv = $('#optiondiv');
       var $subtable = $('#subtable');
        $subtable.css('height', $optionDiv.height());
      Page.init();
     });

subtable in the above example takes the height of optiondiv after it has been rendered on the page.

Page.init() method renders the page again using the values that have been changed using our function earlier. Think of it like this, you use the ready function to call your method to just determine the exact dimensions of the element that you want to check, change values and then render the divs again.