如何使网页中不需要的空白区域缩小？答案

【问题标题】：How to make unwanted white space shrink in webpage?如何使网页中不需要的空白区域缩小？
【发布时间】：2013-12-28 01:21:06
【问题描述】：

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

iframe 支架高度降低时的问题，会导致 iframe 支架与其下方的第二个 div 之间出现不需要的空白。此问题仅在 chrome 中出现，IE 和 FF 工作正常。

当 iframe 的高度降低时，如何使这个空白缩小？

Here is my page

iframe holder div 包含菜单选项卡，其下方的第二个 div 包含 3 列内容。

更新 #1：

截图一：

截图二：

【问题讨论】：

怎么看问题？？？你的页面在 chrome 中对我来说很好用
感谢您的回复@Danko 我现在将发布带有屏幕截图的更新。
@Danko 我现在添加了截图，如果您有任何建议，请告诉我。谢谢你..
为什么不使用你的 js 将底部 div 增长到视口的剩余大小

标签： javascript html iframe dynamic

【解决方案1】：

问题是您的<iframe> 被赋予了311px; 的内联height

我的猜测是它正在获取最大选项卡的高度并使用此 js 将它们全部应用：

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

和或

onload='javascript:resizeIframe(this);'

【讨论】：

那么，有没有办法让js自动调整高度呢？感谢您的帮助。

【解决方案2】：

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

$('#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');
});

这并不准确，$('iframe[name="dservers"]') 选择器需要更改，但它的总体思路。希望这会有所帮助！

【讨论】：

我在 iframe 代码中添加了 height="auto" 但仍然无法在 chrome 中工作。它仅适用于 IE 和 FF。
我无法正确实现。我在页面中附加了“jquery-1.10.2.min.js”，在这些标签之间复制并粘贴了您的代码但它没有工作。任何帮助，将不胜感激。谢谢。
试试我在你的其他问题上发布的内容。如果可行，我将在此处更新答案。 :)