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

我正在创建一个通过外部JavaScript文件加载的工具栏小部件。工具栏漂浮在屏幕的底部，工作正常，但屏幕底部的内容被掩盖了（如图A所示）。图B是我的目标。使用Javascript在页面底部创建工具栏小部件的空间

工具栏应始终可见，固定在屏幕底部。如果页面上需要滚动，则内容将在其下面流动，直到全部滚动到底部时全部可见为止，以便在任何长度的页面上都没有任何内容被遮盖。

Before and after examples

我首先想到的是要设置30像素（工具栏高度）的下缘，但由于大多数，这是专为网站都设置为使用全屏幕（与身体的高度设置为100％），这并不总是奏效。将body scrollHeight降低30px可以解决此问题，但前提是页面上不需要滚动（有时是）。

的jsfiddle例如：http://jsfiddle.net/ZbMDr/1/

来源

2011-12-21 James Simpson

所以这里有一个有点冒失的解决方案，我想到了，这似乎工作到目前为止（我还没有做过广泛的测试）。如果任何人有一个更清洁的方式来完成这一点，这将是有趣的。

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); 
}

来源

2011-12-21 16:26:23

请问这个例子对你的工作？ http://limpid.nl/lab/css/fixed/footer

来源

2011-12-21 05:12:48 Origin

不，因为它在身高设置为100％时不起作用。 – 2011-12-21 06:01:53

这可能是一个愚蠢的问题 - 但为什么身高需要100％？我认为这是其他页脚实现的CSS技巧。 – Origin 2011-12-21 06:25:50

没错，我说我没有控制网站，因为这是一个插入到第三方网站的小部件，其中一些使用100％身高。 – 2011-12-21 07:16:57

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

回答

相关问题