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


});

Answer 2

删除position: fixed, bottom: 0,，div将自动放在网页内容之后。 .append函数已将内容添加到容器的末尾。

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

在底部对齐DIV - Google Chrome扩展程序

2 个答案: