Adjust height of div/section by content

I have a section which is filled by javascript. Basically it creates an iframe inside with another html content where i have no control over. i could set the height manually but its a responsive site and the height will change.

Setting the height of the section to height: fit-content; doesnt work because the next element is the iframe which has no height itself. When i set the height of the iframe in the inspector it works so fit-content works but i have no height.

is there a way to get the current display height? I also could search for a child class with the correct height or is there a better way?

#SectionID{
  height: fit-content;
}

<section id="SectionID">

<iframe width="100%" height="100%" src="//jsfiddle.net/dichterD/ny0k6d27/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<!-- iframe is 100% height, content of iframe is html > body > div (with height defined) -->
<!-- no control over iframe content -->

</section>

i could embed the iframe directly to give it an id. what i would like to achieve is the iframe always in the correct height - also responsive. so i would have to get something like the scrollheight or offsetheight.

Height = document.getElementById("iframeid").contentWindow.document.getElementsByTagName('body')[0].scrollHeight;

gives me 150px (which is the iframe height), html gives me 8px. the div inside the iframe section is 550px.

maybe im calling the js at the wrong time

Solution

To dynamically set the height of the based on the content inside the <iframe, you can use JavaScript. However, you need to make sure that you are accessing the content inside the iframe after it has loaded. You can achieve this by attaching an onload event listener to the iframe.

        <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        #SectionID {
          height: fit-content;
        }
      </style>
      <script>
        function adjustSectionHeight() {
          var iframe = document.getElementById('myIframe');
    
          if (iframe) {
            iframe.onload = function() {
              var contentHeight = iframe.contentWindow.document.body.scrollHeight;
              document.getElementById('SectionID').style.height = contentHeight + 'px';
            };
          }
        }
      </script>
    </head>
    <body>
      <section id="SectionID">
        <iframe id="myIframe" width="100%" height="100%" src="//jsfiddle.net/dichterD/ny0k6d27/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
      </section>
    
      <script>
        // Call the function after the page has loaded
        window.onload = function() {
          adjustSectionHeight();
        };
      </script>
    </body>
    </html>