title: Have <iframe> merge with parent body, using only 1 scrollbar for whole page, always adjusting for height
body: <p>I'm trying to do something that shouldn't be very hard, but surprisingly I haven't been able to find the solution online.</p>
  
  <p>I want to embed iframes to any random website, without the visitors noticing that it's actually a different frame. I want the iframe to merge with the parent body, extending the body of the parent, so that the non-iframe-part and the iframe-part of the website can be scrolled only using the main scrollbar of the parent page.</p>
  
  <p>This is my code so far:</p>
  
  <pre><code>&lt;h1&gt;Tours&lt;/h1&gt;
  
  &lt;div style="background-color: red; color: white; padding: 200px; text-align: center;"&gt;
      Top part of page
  &lt;/div&gt;
  
  &lt;iframe id="tourtask-iframe" style="overflow: hidden;" src="/public/index.php?b=eit&amp;token=abcd1234&amp;p=tours&amp;lang=en"&gt;Please upgrade to a browser that supports iframes.&lt;/iframe&gt;
  
  &lt;style&gt;
  body, html {
      width: 100%;
      height: 100%;
      margin: 0;
  }
  
  #tourtask-iframe {
      width: 100%;
      height: 2000px;
      border: none;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>When I do a <code>overflow: hidden;</code> on the body of the source file of the <code>iframe</code> archive, the scrollbar disappears, but I'm unable to scroll the iframe portion of the page.</p>
  
  <p>I'd need to update the height of the <code>iframe</code> element to fill up the 100% of the height of this file. I'd also need to update the height of the <code>iframe</code> element whenever I expand/collapse any collapsible content in the frame. </p>
  
  <p>How can this be done? Or is there a better way? </p>
  
  <p>I'd preferably not use any library/framework for the parent page, since I'll need to be able to embed this iframe to totally different webpages.</p>
  
  <p>Thank you!</p>