title: Position iframe to be above a footer section. Simple
body: <p>I would like an iframe to be above a footer section that has some content.</p>
  
  <p>I am a real beginner at this, but I was able to scrap together some code.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;title&gt;Test Layout&lt;/title&gt;
      &lt;style type="text/css"&gt;
        body, html {
          margin: 0; padding: 0; height: 100%; overflow: hidden;
        }
        #footer {
          position:absolute; left: 0; 
          top: expression(document.body.clientHeight-150); 
          right: 0; 
          height: 150px; 
          background: red;
        }
        #content {
          position:absolute; 
          left: 0; 
          right: 0; 
          bottom: expression(document.body.clientHeight-150); 
          top: 0; 
          background: blue; 
          height: expression(document.body.clientHeight-150);
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="content"&gt;
        &lt;iframe width="100%" height="100%" src="https://www.link.com" /&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
        Test content
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>-The order is right, the iframe sits above, however the iframe itself is too small. I want there to be there is no scroll bar. The footer section doesn't show the background color or text. I've clearly made a mess of things.</p>
  
  <p>-I also don't want the footer to be absolutely positioned, a user should scroll down a bit to see it.</p>
  
  <p>-I am also curious to learn how to get rid of a scroll bar from an iframe even when the iframe is too small. Actually, it would be nice if there was a way to 'cut off' the bottom section of a source link and replace it with my footer.</p>