使用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在頁面底部創建工具欄小部件的空間

回答

相關問題