Home  >  Q&A  >  body text

Embed/iframe always full height

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粉021553460P粉021553460182 days ago405

reply all(1)I'll reply

  • P粉741223880

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

    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>

    reply
    0
  • Cancelreply