Question

我正在使用Google Chrome的工具栏作为扩展程序的一部分。假设工具栏是一个简单的矩形，由下面的css描述：

#top{
    display: none;
    width: 100%;
    background: red;
    z-index:9999999;
    height:40px;

}

我注入的工具栏看起来更像是：

<body>
    <div id="panel_left">
    ....
    </div>
    <div id="panel_right">
    ....
    </div>
</body>

我将它通过以下方式注入iframe：

$("body").before('<iframe name="top" id="top" frameborder="0"></iframe>');
var top = document.getElementById("top");
top.src = chrome.extension.getURL("top.html");

问题从一些网页开始，因为它们的css能够覆盖我的工具栏。我希望工具栏从网站的顶部开始，高度为40px，然后显示常用的网页内容。

你有任何想法如何去做（或者更确切地说是改进它，因为它适用于某些网页）

Answer 1

您是否尝试添加：

top: 0;
left: 0;
margin: 0;
padding: 0;

在插入工具栏之前添加此内容：

// Take down the webPage
document.getElementsByTagName('body')[0].style.marginTop = '39px'; 
// Or more if your toolbar is greater

Answer 2

仅适用于寻找相同解决方案的所有用户。它有效：

body
{
position: fixed;
width: 100%;
height: 100%;
position:relative;
}

Google Chrome，html工具栏 - 始终存在问题

2 个答案: