gpt4 book ai didi

html - 我的 chrome 扩展中的弹出窗口很小,不显示数据

转载 作者:太空宇宙 更新时间:2023-11-04 04:22:33 25 4
gpt4 key购买 nike

我正在编写一个会显示弹出窗口的 Chrome 扩展程序,但我无法控制内容的大小,只能显示一个小像素。

这里是截图,供引用:

screenshot

如您所见,两个渐变像素是滚动条,一个黑色像素是信息。

编辑:它会代替固定或相对定位工作吗?

    <!DOCTYPE html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style type="text/css">
body {
background-color: #ffffff;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro',
Helvetica, Arial, sans-serif;
}

.profile_tab {
position: absolute;
top: 30px;
left: 12px;
}

.settings_tab {
position: absolute;
top: 124px;
left: 12px;
}

.news_tab {
position: absolute;
top: 218px;
left: 12px;
}

</style>
<script></script>
</head>
<body>
<div
class="profile_tab"> <img src="images/Profile_Tab.png">
</div>
<div
class="settings_tab"> <img src="images/Settings_Tab.gif">
</div>
<div
class="news_tab"> <img src="images/News_Tab.gif">
</div>


</body>
</html>

最佳答案

弹出窗口的大小由根元素的宽度/高度决定,<html> ,也称为 document.documentElement .

当元素被绝对定位时,它会从文档流中移除。因此,元素的宽度/高度不会影响父元素的宽度/高度。

要解决此问题,您可以执行以下一项或全部操作:

  • 不要使用 position:absolute .

  • 为根元素分配一个固定的宽度/高度(通过 CSS)。

  • 使用JavaScript计算最大元素的宽/高,并将结果赋值给document.documentElement.style.width.height .最通用的方法(=遍历所有元素并使用 getBoundingClientRect() 计算它们的底部/右侧偏移量)非常昂贵。因为您可能事先知道页面的外观,所以您将能够创建更有效的方法。例如:选择最大的元素并读取它的.scrollHeight.offsetHeight属性。

关于html - 我的 chrome 扩展中的弹出窗口很小,不显示数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18817047/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com