简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Embed/iframe always full height
P粉021553460
P粉021553460 2024-03-31 09:50:18
0
1
403

I have embedded several html files that vary in "height". I want the embedded content to always fill the parent div so that I can scroll the parent instead of the embedded content.

If I set a specific height for the content wrapper that is larger than the height of the embedded content, it works. The only problem is that the specific height doesn't match the other embedded html files due to different content and leaves a lot of dead space. How can I make the content wrapper scale to the height of the embedded content? 

<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%;
}

I tried setting the height of the embedded content and content wrapper to 100% or automatic, but neither worked.

P粉021553460
P粉021553460

reply all(1)
P粉741223880
P粉7412238802024-04-01 09:30:55 1 floor

I solved my problem by using javascript to set the iframe's height to the height of its content, using this website: https://www.tutorialrepublic.com/faq/automatically-adjust-iframe-height- according-to-its-content-usage-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>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！