Question

我想在最大化（宽度和高度= 100％）iframe中加载响应式网站，然后将宽度和高度从100％固定到相应的像素值，因此如果外部窗口缩小，则响应 - 网站保持之前的最大化维度。

以下代码有效，但如果您将窗口缩小，则没有滚动条。

如何让滚动条自动显示，如overflow：auto？我确实需要100％的初始尺寸，因为我的响应式iframe内容非常陈旧并且在调整大小时会出现问题，所以我以后无法调整iframe的大小。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<style>
	* {
		padding: 0;
		margin: 0;	
	}

	#wrapper { position:fixed; top:0; left:0; width:100%; height:100%; }
	#wrapper iframe { width:100%; height:100%; border:0 none; }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script language="JavaScript" type="text/JavaScript">
	<!--
	$( document ).ready(function() {
	     $('#wrapper').width($('#wrapper').outerWidth());
	     $('#wrapper').height($('#wrapper').outerHeight());
	});

	//-->
	</script>
</head>
<body>
<div id="wrapper">
	<iframe id="myFrame" src="https://getbootstrap.com/examples/grid/" frameborder="0">
	  <p>Your browser does not support iframes.</p>
	</iframe>
</div>
</body>
</html>

＆＃13;

Answer 1

我自己找到了解决方案。诀窍是将body和html设置为100％高度，移除位置：固定包装并添加＆＃34; display：block＆＃34;到iframe。没有display：block，iframe的末尾有一个小空间，所以垂直滚动条始终可见。

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

* {
    padding: 0px;
    margin: 0px;    
}

#wrapper { width:100%; height:100%; }
#wrapper iframe { display: block; width:100%; height:100%; border:0 none;}

缺少100％固定宽度/高度iFrame的滚动条

1 个答案: