我有一个使用 bootstrap 制作的简单网页。现在我想将它嵌入另一个网页，但我在设置高度时遇到问题。
这是我的网页:
<html>
<head>
<style>
#above1 { margin-bottom:6px; }
#iframe1 { height:100%; width:100%; border: 1px solid #0094ff; border-radius:3px; padding-top:6px; }
</style>
</head>
<body>
<div class="container-fluid">
<div id="above1">
<div class="row"> [content here]</div>
<div class="row"> [more content here]</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<iframe id="iframe1" src="home.html"></iframe>
</div>
</div>
</div>
</body>
</html>
这是我要嵌入的 home.html 网页:
`<htlm>
<head>
</head>
<body>
<div class="container-fluid">
<div class="row" >
<div class="col-md-6">
<img src="image/2.png" >
</div>
<div class="col-md-6">
<img src="image/1.png" >
</div>
</div>
</div>
</body>
</html>`
当我实现这个时，我在 iframe 中得到了滚动条，我该如何解决这个问题？
最佳答案
删除#iframe1 中的height 和width
此脚本可帮助您自动调整 iframe 的 width 和 height 以适应其中的内容。
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iframe1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe id="iframe1" src="home.html"></iframe>
关于html - 在网页中设置iframe高度的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55468364/