title: How to make the web page content fits 100% the div in iframe
body: <p>I want to add a page in the <code>&lt;iframe&gt;</code> but I am facing a problem with the <strong>height</strong> of the page in <strong>iframe</strong></p>
  <p>I don't want to make it <em>fixed</em>. it should be changed depending on the <em>height</em> of the page in the <code>&lt;iframe&gt;</code>, if it is <strong>800px</strong> then the content should be displayed without the double scroll bar</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html dir=&quot;ltr&quot; lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
     
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh&quot; crossorigin=&quot;anonymous&quot;&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
    &lt;div class=&quot;col-lg-12&quot;&gt;
      
   &lt;div class=&quot;col-lg-9&quot;&gt;
  
          &lt;div class=&quot;divFrame&quot;&gt;
          &lt;iframe src=&quot;https://mattboldt.com/demos/typed-js/&quot; id=&quot;myIframe&quot; class=&quot;iframe&quot;  frameborder=&quot;0&quot; 
      &gt;&lt;/iframe&gt; 
      
      &lt;/div&gt;
  
    
    &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.4.1.slim.min.js&quot; integrity=&quot;sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js&quot; integrity=&quot;sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/html&gt;
  
  
  
  </code></pre>
  <p>This an example to be more clear.</p>
  <p>Let's assume the <em>right space</em> in the <em>menu bar</em>, I embedded a page by <code>&lt;iframe&gt;</code> using the style below.</p>
  <p>I used <code>padding-bottom:100%</code> to set the <em>height</em> of the page.</p>
  <p>If I change the <em>size of the screen</em> the <em>height</em> will be affected badly.</p>
  <p>How can I set the <em>height</em> where it fits all the types of screens not only one screen (without double scroll bar)</p>
  <pre><code>&lt;style&gt;
  
  .divFrame
  {
  padding-bottom:100%; position:relative; display:block; width: 100%;top: 0px; left: 0; right: 0; bottom: 0
  }
  .iframe
  {
  position:absolute; top:0; left: 0; width: 100%; height: 100%; 
  }
  
  &lt;/style&gt; 
  </code></pre>