如何在窗口调整大小时调整iframe的大小

Question

我正在尝试像这样在窗口调整大小上调整iframe元素的大小：

唯一的区别是，在我的原始代码中，我具有pdf文件作为src，但没有Apple网站。

src='link-to-local-pdf'

我希望它在窗口调整大小上使其分别调整iframe本身的大小，而不是在窗口上添加滚动，而仅在iframe上添加滚动。 你能帮我吗？

Answer 1

希望我正确理解您的要求。 这是一个页面示例，其中iframe始终使其自身恰好适合其父窗口。

工作示例： http : //jsfiddle.net/My6mj/

JavaScript的：

// set initial size
$( document ).ready(SetIframeSize);

// resize on window resize
$(window).on('resize', SetIframeSize);

function SetIframeSize(){
    $("#external").width($(window).width() - 18); // added margin for scrollbars
    $("#external").height($(window).height() - 35);
}

HTML：

<div>
    <br/>
    <div id="iframe-wrapper" align="center" style="z-index: 0">
        <iframe id="external" src="http://www.apple.com/">dada</iframe>
    </div>   
</div>

CSS：

body {
    overflow:hidden;
}

Answer 2

在没有JavaScript的情况下应该可以使用：

计算iframe内容的纵横比（高度/宽度）。
将iframe包裹在div中。
将样式应用于包装器：
.wrap {位置：相对； padding-top：/ *长宽比，以％* /溢出：隐藏； }
从iframe移除宽度和高度。
将样式应用于iframe：
iframe {位置：绝对； 最高：0; 左：0； 宽度：100％; 高度：100％}

Answer 3

这就是您想要的。

<body>
   <iframe id="the_iframe"></iframe>
</body>

#the_iframe {
    position: absolute;
    left: 50px;
    right: 50px;
    top: 50px;
    bottom: 50px;
}

诀窍是绝对定位，这实际上是相对于其父对象的。 该css实际上给the_iframe一个50px的边距，但在整个窗口中。

如何在窗口调整大小时调整iframe的大小

问题描述

3 个解决方案

解决方案1
2 2013-12-13 15:15:23

解决方案2
0 2019-02-01 23:39:21

解决方案3
-1 2013-12-13 14:41:03

如何在窗口调整大小时调整iframe的大小

问题描述

3 个解决方案

解决方案1 2 2013-12-13 15:15:23

解决方案2 0 2019-02-01 23:39:21

解决方案3 -1 2013-12-13 14:41:03

解决方案1
2 2013-12-13 15:15:23

解决方案2
0 2019-02-01 23:39:21

解决方案3
-1 2013-12-13 14:41:03