首頁  >  問答  >  主體

嵌入/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 天前415

全部回覆(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
  • 取消回覆