title: Make an Iframe responsive in height
body: <p>I have a type of "store-locator" on <a href="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" rel="nofollow noreferrer">https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/</a> 
  Due to demand, I want to put this in an iFrame so other websites can display this form on their page. Giving them the possibility to easily add my "store-locator" to their website.</p>
  
  <p>At the moment I have: </p>
  
  <pre><code>&lt;iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no" style="width:100%;height:734px;border:none;overflow:hidden;"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>Which works, as long as the screen doesn't get to small. 
  However, the form is responsive, and if the screen becomes very small, the row with addresses goes underneath the big map. Making the complete form a lot higher then on normal view. (normally it would be 734px high, in responsive design it is 1388px high)
  This would mean that I need an iFrame that stretches just as the content stretches. (if that is at all possible)</p>
  
  <p>If that is not possible, would it be possible to put something like this in the style? (it doesn't work if I use it in my example, but maybe I'm doing it wrong?)</p>
  
  <pre><code>Style="@media (max-width:675px){iframe{height:1388px}}"
  </code></pre>
  
  <p>The goal of this piece of CSS would be to change the height of the iFrame when the width goes below 675px.</p>
  
  <p>Another solution is welcome, as long as it works :). Because I'm displaying the code on my website, so other can just copy-paste it, it would be beneficial if the code is kept reasonably simple.</p>
  
  <p>It seems 1 person has removed their comment, even though the solution was pretty good. Essentially, this was the code that I ended up with thanks to him:</p>
  
  <pre><code>&lt;style&gt;#iframe {width:100%;height:740px;border:none;overflow:hidden;}
  @media (max-width:675px){#iframe{height:1588px;}}
  &lt;/style&gt;
  &lt;iframe src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/ 
  "frameborder="0" id="iframe" name="De Detailer-Zoeker"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>The only problem is that this only responds to the size of the browser-screen, and not the container in which the iFrame is placed. This means that the iFrame will behave differently on a website with sidebars, then one without sidebars.</p>