iframe高度100％不起作用[重复]

Posted 2023-03-05

【中文标题】iframe高度100％不起作用[重复]

【英文标题】：iframe height 100% not working [duplicate]

【发布时间】：2015-04-06 10:18:14

【问题描述】：

我对 iframe 高度有疑问。下面是 iframe 高度为 100% 的一段代码

 <iframe id="iframeid" src="#"   id="iframeid">
</iframe>

但是，iframe 不适合整个屏幕高度。我得到了 1/4 的屏幕

所以，我在这里使用 Jquery 来识别屏幕高度并将其设置为 iframe 高度。

$(document).ready(function() 
    var iframeWin = screen.height;
    $('#iframeid').height(iframeWin);
);

现在高度扩大到一定程度（屏幕高度），但问题是我的高度越来越高。我也看到了一些滚动..

是否有任何正确的方法可以使 iframe 适合整个屏幕？

这是我的JSFIDDLE

【问题讨论】：

你看到的是扩大的尺寸，因为你使用的是全屏尺寸。你需要考虑屏幕上的其他元素 pushing 你的 iframe 向下

我不想成为那个人，但是这个问题已经被问过几次了。 Have a look here for a number of solutions. :)

Preetesh.Dev 的回答是正确的方法吗？

@UIDesigner - 这是实现这一目标的众多方法之一。

【参考方案1】：

问题是您使用的是整个屏幕高度。正确的方法是使用window 高度。所以正确的代码是：

$(document).ready(function() 
    var window_size = $(window).height();
    $('#iframeid').css('height', window_size);
);

这是updated JSFiddle。

【讨论】：

这样正确吗？

是的，当然是。阅读此文档以了解更多信息：api.jquery.com/height

我还想补充一点，screen.height 返回屏幕本身的高度。这意味着如果您使用的屏幕分辨率为 1366x768，那么screen.height 将返回 768。