简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首页
文章
问答
课程
专题
下载
手游
词典
最近更新

首页  >  问答  >  正文

嵌入/iframe 始终全高

我嵌入了几个 html 文件，这些文件的“高度”各不相同。我希望嵌入的内容始终填充父级 div，以便我可以滚动父级而不是嵌入的内容。

如果我为内容包装器设置一个特定的高度，该高度大于嵌入内容的高度，它就可以工作。唯一的问题是，由于内容不同，具体高度与其他嵌入的 html 文件不匹配，并且会留下大量死空间。我怎样才能使内容包装器缩放到嵌入内容的高度？

<body onload="mathSubject()">
  <div class="nav">
      
  </div>
    
  <div class="content-wrapper">
      <embed id="embedded-content" type="text/html" src="content.html">
  </div>
</body>
.content-wrapper{
    width: 80vw;
    height: 90vh;
    margin-left: auto;
    margin-right: auto;
}

#embedded-content{
  width: 100%;
  height: 100%;
}

我尝试将嵌入内容和内容包装器的高度设置为 100% 或自动，但都不起作用。

P粉021553460P粉021553460182 天前414

全部回复(1)我来回复

  • P粉741223880

    P粉7412238802024-04-01 09:30:55

    我通过使用 javascript 将 iframe 的高度设置为其内容的高度来解决我的问题，使用此网站： https://www.tutorialrepublic.com/faq/automatically-adjust-iframe-height-according-to-its-内容-使用-javascript.php

    <style>
iframe{
    width: 100%;
    border: 2px solid #ccc;
}
</style>

<iframe src="demo.php" id="myIframe"></iframe>

<script>
// Selecting the iframe element
var iframe = document.getElementById("myIframe");

// Adjusting the iframe height onload event
iframe.onload = function(){
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>

    回复
    0
  • 取消回复