如何在窗口調整大小時調整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