开发者

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

开发者 https://www.devze.com 2022-12-11 03:25 出处:网络
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 r

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开发者_StackOverflow中文版 achieve this using JQuery.


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.


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

0

精彩评论

暂无评论...
验证码 换一张
取 消