使用Javascript在工具栏小部件的页面底部创建一个空格

Question

我正在创建一个通过外部javascript文件加载的工具栏小部件。工具栏浮动在屏幕的底部，工作正常，但屏幕底部的内容被掩盖（如图A所示）。图B是我的目标。

工具栏应始终可见，固定在屏幕底部。如果在页面上需要滚动，则内容将在其下方流动，直到在滚动到底部时全部可见，这样就不会在任何长度的页面上覆盖任何内容。

我的第一个想法是设置一个30px的底部边距（工具栏高度），但由于这个设计的大多数网站都设置为使用全屏（身高设置为100％），这不会总是工作。将body scrollHeight减少30px可以解决此问题，但仅限于页面上不需要滚动（有时是）。

JSFiddle示例：http://jsfiddle.net/ZbMDr/1/

Answer 1

这个例子适合你吗？ http://limpid.nl/lab/css/fixed/footer

Answer 2

所以这是我提出的一个有点hacky的解决方案，到目前为止似乎工作（我还没有进行过广泛的测试）。如果有人有更清洁的方法来实现这一点，那将会很有趣。

var bodyCH = document.body.clientHeight,
    bodySH = document.body.scrollHeight;

/* insert the toolbar here */

if (bodyCH === bodySH) {
    document.body.style.height = parseInt(bodySH, 10) - 30 + 'px';
} else {
    var spacer = document.createElement('div');
    spacer.style.height = '30px';
    document.body.appendChild(spacer);
}