title: "Extend" webpages to fit a sticky footer
body: <p>I'm building a plugin that injects an HTML iframe "toolbar" onto the bottom of every web page.  I've achieved "sticky footer" behavior by injecting the following:</p>
  
  <pre><code>&lt;iframe frameborder="0" noresize="noresize" src="http://example.com/toolbar.html" style="position:fixed; background:transparent; width:100%; height: 33px; padding:0; bottom: 0px; z-index: 2px;"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>However, this iframe overlaps the bottom 30 pixels of a web page.    What I'm looking for is how to "extend" each web page 30 pixels so that our bar has all the behavior of a sticky footer (it's always present at the bottom of the screen), but a user can still scroll to the bottom of a website and see the bottom-most content of that website.  (Without using traditional frames, which have caused other problems.)</p>
  
  <p><strong>Additional Info</strong></p>
  
  <p><a href="https://chrome.google.com/extensions/detail/kcahibnffhnnjcedflmchmokndkjnhpg" rel="nofollow">Stumble Upon for Chrome</a> has achieve this behavior at the top of the window (i.e., the Stumble Upon Bar "pushes" content down instead of overlapping it.)  </p>