CODEWITHSUNDEEP
javascripthtmliframedynamic
Mina Hafzalla
Mina Hafzalla

Reputation: 2821

How to make unwanted white space shrink in webpage?

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:

enter image description here

Screenshot two:

enter image description here

Upvotes: 0

Views: 412

Answers (2)

wrxsti
wrxsti

Reputation: 3504

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!

Upvotes: 1

Xareyo
Xareyo

Reputation: 1377

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);'

Upvotes: 1

Related Questions