嵌入/iframe 始終全高
P粉021553460
P粉021553460 2024-03-31 09:50:18
0
1
615

我嵌入了幾個 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粉021553460
P粉021553460

全部回覆(1)
P粉741223880

我透過使用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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板