我可以使用 jQuery 调整 iframe 的大小以填充剩余的窗口空间吗？答案

【问题标题】：Can I use jQuery to resize an iframe to fill the remaining window space?我可以使用 jQuery 调整 iframe 的大小以填充剩余的窗口空间吗？
【发布时间】：2013-12-06 04:20:42
【问题描述】：

我有一个高度为 90 像素的 div。下面是一个 iframe。

我想弄清楚如何编写 javascript（或 jQuery）来始终将 iframe 设置为正确的高度以占据屏幕的其余部分。如果有更好的基于 HTML5 的解决方案，我当然也很想知道。

Javascript：

$(document).ready(function() {

    var $window = $(window);
    function checkSize() 
    {
        var windowHeight = $window.height();
        var frameHeight = windowHeight - 90;
        $('iframe').height() = frameHeight; 
    }
    checkSize();
    $(window).resize(checkSize);

});

HTML：

<body style="overflow:hidden;">
<div style="height:90px;">
Content goes here
</div>

<iframe src="www.someurl.com" style="width:100%; height:900px; seamless: seamless; frameborder: 0;"></iframe>
</body>

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

首先将您的 iframe 显示为 block。然后，您可以使用 iframe 的顶部相对于窗口高度来计算距离底部的距离：

jQuery

$(window).on('load resize', function(){
    $window = $(window);
    $('iframe').height(function(){
        return $window.height()-$(this).offset().top;   
    });
});

CSS

iframe{
    display:block; 
    margin:0; 
    padding:0; 
    border:0;
}

JSFiddle

【讨论】：

看看 JSFiddle，它与您所做的有什么不同？
同样的原则也适用。小提琴正在工作，如果您正确使用代码，它应该可以工作 jsfiddle 与否。
我以为您会在实际代码中更改函数。我已经更新了你的jsfiddle .. 首先，你没有包含 jQuery（这很重要！）。让我们continue this discussion in chat

【解决方案2】：

$('iframe').height(frameHeight)

fiddle
试试这个

【讨论】：

可能是浏览器的差异，因为不适合我 :)

【解决方案3】：

一些 CSS 可以解决问题：

body, html { width:100% ;
    height:100% ;
    overflow:hidden ;
}

iframe { width:100% ; 
        height:100% ;
    border:none ;
}

fiddle

【讨论】：

不幸的是没有任何影响
ok 这工作正常，但仍然比窗口大小大 90 像素。所以你向下滚动，滚动条继续向下。虽然考虑到有些人禁用了 js，但它可能是最好的跨浏览器解决方案