Question

我试图在窗口调整大小上调整iframe元素的大小，如下所示：

唯一的区别是，在我的原始代码中，我将pdf文档作为src而不是苹果网站。

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 个答案: