title: How to Make iframe 100% height according to its content
body: <p>I had seen a lot of people asking how to make iframe 100% height. That can be easily archived using some CSS. It will make the iframe display 100% as relative to the device screen. But how to make iframe 100% height according to its content?</p>
  
  <p>Here's my current code to make 100% iframe according to device screen:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        iframe {
          display: block;
          background: #000;
          border: none;
          height: 100vh;
          width: 100vw;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;iframe src="https://..."&gt;Your Browser Does Not Support iframes!&lt;/iframe&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The <code>allowfullscreen</code> and <code>position:absolute</code> didn't help except for crashing my site's template. This is the best I can do without crashing the primary CSS. Please help...</p>
  
  <p>Edit: The iframe content is responsive using </p>
  
  <p><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;</code> </p>
  
  <p>so preset height using javascript didn't work too. Perhaps is there a way of using height units instead?</p>
  
  <p><code>em</code>, <code>ex</code>, <code>rem</code> etc? Or make it a specific percentage of <code>vw</code>?</p>