在底部对齐 DIV - Google Chrome 扩展名

Question

我有一个 Google Chrome 扩展程序，当用户点击 Chrome 扩展程序图标时，我会在网页底部添加一个 DIV工具栏。

这是代码，

var newdiv = document.createElement('div');
newdiv.id="alignToBottomDIV";
$( "body" ).append(newdiv);
$("#alignToBottomDIV").load(chrome.runtime.getURL("bottomBar.html"));

和CSS、

#alignToBottomDIV{
    height:50px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index:9999;        
}

但是 DIV 并未位于页面底部。它与网页的某些内容重叠。

任何指示如何将 DIV 放在网页内容之后？

Answer 1

去掉position: fixed, bottom: 0,，div会自动放在网页内容的后面。 .append 函数已将内容追加到容器的末尾。

#alignToBottomDIV{
    height:50px;
    width: 100%;
    z-index:9999;
    border:solid 1px #ccc;
    background-color:#f5f5f5;
}

Answer 2

向 Jquery 加载添加一个回调函数以将空高度添加到文档末尾等于加载元素的高度：

var newdiv = document.createElement('div');
newdiv.id="alignToBottomDIV";
$( "body" ).append(newdiv);
$("#alignToBottomDIV").load(chrome.runtime.getURL("bottomBar.html"),function(){

var addedHeight=$("#alignToBottomDIV").height();
$('<div style="height:'+addedHeight+'px"></div>').appendTo(document.body);


});

在底部对齐 DIV - Google Chrome 扩展名

Aligning a DIV at the bottom - Google Chrome extension

javascript

css

google-chrome-extension