"Extend" webpages to fit a sticky footer

I'm building a plugin that inject开发者_StackOverflow中文版s an HTML iframe "toolbar" onto the bottom of every web page. I've achieved "sticky footer" behavior by injecting the following:

<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;"></iframe>

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.)

Additional Info

Stumble Upon for Chrome has achieve this behavior at the top of the window (i.e., the Stumble Upon Bar "pushes" content down instead of overlapping it.)

---

I would add a padding-bottom:33px to the body.

update

The above answer will not work if both html and body tags have height:100%;

---

solution

scratch the body technique and do.

html{
  height:auto!important;
  height:100%;
  min-height:100%;
  padding-bottom:33px;
}

i can't think of a scenario where this would mess anything up.