title: Double scroll bar due to iframe
body: <p>With the code below, I'm getting a double scroll bar - one for the iframe itself and one for the web page. I am looking for suggestions/solutions to only have one scroll bar, which would be associated with the entire page, not the iframe. My original thought process was to determine the size of the browser using javascript, then use that as the iframe tag height.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;header&gt;
      &lt;div class="container"&gt;
         &lt;a href = "index"&gt;&lt;img id='logo' src='logo.png' style="width:230px;height:237;"/&gt;&lt;/a&gt;
         &lt;nav&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="link1"&gt;link1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="link2"&gt;link2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="link3"&gt;link3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;    
          &lt;/nav&gt;
      &lt;/div&gt; 
    &lt;/header&gt;
    &lt;div class = "iframe-content"&gt;
    &lt;iframe src ="https://NeedToScrollToSeeContent.com" width= 100% height= 1000 style="text-align:center" frameborder="0"&gt;&lt;/iframe&gt;
     &lt;/div&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
      margin: 0;
      background: #222;
      font-family: 'Work Sans', sans-serif;
      font-weight: 400;
  }
  
  header {
      background: #ffffff;
      position: relative;
  }
  
  .container {
      width: 80%;
      margin: 0 auto;
  }
  
  .iframe-content {
      position: absolute; 
      top: 100px; 
      left: 0; 
      right: 0; 
      bottom: 0;
  }
  .iframe-content iframe {
      display: block; 
      width: 100%; 
      height: 100%; 
      border: none;
  }
  </code></pre>
  
  <p><strong>Things I've tried:</strong></p>
  
  <ol>
  <li>In the html iframe tag, I took out <code>height = 1000</code>. This shrunk the iframe to a very small portion of the page. I also replaced in the html iframe tag <code>height = 1000</code> with <code>height = 100%</code> and still got the same issue.</li>
  <li>As mentioned above, I used javascript to determine the height of the browser and used that to determine the height attribute within the iframe tag. That did work, but it gave me a scroll bar only for the iframe, not the entire page.</li>
  </ol>
  
  <p>Do note that I have taken a look at this <a href="https://stackoverflow.com/questions/325273/make-iframe-to-fit-100-of-containers-remaining-height">similar question</a> and implemented it into my code.</p>