如何在网页中缩小不需要的空白空间？

问题描述

我有一个页面包含两个垂直div。第一个div包含iframe持有者和第二个随机内容。 iframe的高度可以更小或更高（具有动态高度）。

当iframe持有者高度降低时，会在iframe持有者和其下的第二个div之间产生不需要的空白空间。这个问题仅出现在 chrome 中，IE& FF正在工作正常。

当iframe降低身高时，如何让这个空白空间缩小？

iframe持有者div包含菜单选项卡，其下面的第二个div包含3列内容。

---

更新＃1：

截图一：

截图二：

解决方案

如果您将jQuery添加到dual_core.html，那么以下脚本应该有所帮助。你可以在不使用jQuery的情况下做同样的事情，但是我做了类似的事情，所以我用你的选择器ID替换了它。

  $（' ＃doublecore_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'）; 
}）; 
  

不准确，$（'iframe [name =dservers]'）选择器需要改变，但它的总体思路。
希望这有助于！

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:

解决方案

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!

这篇关于如何在网页中缩小不需要的空白空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！