javascript - 在底部对齐 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

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


});