How to make unwanted white space shrink in webpage

Question

I have a page contains two vertically divs. First div contains iframe holder and the second random contents. The iframe can be less or more in height (has dynamic height).

The problem when the iframe holder decrease in height, that causes unwanted white space between the iframe holder and the second div below it. This problem occurs in chrome only, IE & FF are working fine.

How can I make this white space shrinks when the iframe decrease in height?

Here is my page

The iframe holder div contains the menu tabs, the second div below it contains a 3 columns of contents.

---

Update #1:

Screenshot one:

Screenshot two:

Answer 1

If you add jQuery to dual_core.html then the following script should help. You can do the equivalent without jQuery, but I had something similar made so I just replaced with your selector IDs.

$('#dualcore_servers_menu_wrapper1 a').click(function(){
    menuHeight = $('#dualcore_servers_menu_wrapper1').height();
    contentHeight = $('#dualcore_servers_content_wrapper1').height();
    $('iframe[name="dservers"]').height( (menuHeight + contentHeight) + 'px');
});

Its not exact, the $('iframe[name="dservers"]') selector will need to change, but its the general idea. Hope this helps!

Answer 2

The problem is your <iframe> is being given an inline height of 311px;

My guess would be that it's getting the height of the largest tab and applying it them all with this js:

function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }

and or

onload='javascript:resizeIframe(this);'