“扩展”网页以适应粘性页脚

Question

我正在构建一个插件，将 HTML iframe“工具栏”注入每个网页的底部。我通过注入以下内容实现了“粘页脚”行为：

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

但是，此 iframe 与网页底部的 30 个像素重叠。我正在寻找的是如何将每个网页“扩展”30 像素，以便我们的栏具有粘性页脚的所有行为（它始终出现在屏幕底部），但用户仍然可以滚动到底部并查看该网站最底部的内容。 （没有使用传统的框架，这会导致其他问题。）

其他信息

Stumble Upon for Chrome 已在窗口顶部实现了此行为（即，Stumble Upon Bar 将内容“向下推”而不是重叠。）

Answer 1

我会在正文中添加一个padding-bottom:33px。

更新

如果html 和body 标签都有height:100%;，上述答案将不起作用

---

解决方案

抓紧身体技术，然后做。

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

我想不出这会搞砸任何事情的场景。