gpt4 book ai didi

javascript - 100% 固定宽度/高度的 iFrame 缺少滚动条

转载 作者:行者123 更新时间:2023-11-28 07:00:31 24 4
gpt4 key购买 nike

我想在最大化(宽度和高度 = 100%)iframe 中加载响应式网站,然后将宽度和高度从 100% 固定到相应的像素值,因此如果外部窗口缩小,响应式-网站保持以前的最大化尺寸。

下面的代码可以工作,但是如果你把窗口变小,就没有滚动条了。

如何使滚动条自动出现,如 overflow:auto?我确实需要 100% 的初始尺寸,因为我的响应式 iframe 内容非常旧并且在调整大小时会出现问题,所以我以后无法调整 iframe 的大小。

<!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>

最佳答案

我自己找到了解决方案。诀窍是将 body 和 html 设置为 100% 高度,删除包装器的 position:fixed 并将“display:block”添加到 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;}

关于javascript - 100% 固定宽度/高度的 iFrame 缺少滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33265307/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com