Question

我正在编写一个可以显示弹出窗口的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>

Answer 1

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

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

要解决此问题，您可以执行以下一项或所有操作：

请勿使用position:absolute。
为根元素指定固定的宽度/高度（通过CSS）。
使用JavaScript计算最大元素的宽度/高度，并将结果分配给document.documentElement.style.width和.height。最通用的方法（=循环遍历所有元素并使用getBoundingClientRect()计算它们的底部/右侧偏移）非常昂贵。因为您可能事先知道页面的外观，所以您将能够创建更有效的方法。例如：选择最大元素并阅读其.scrollHeight或.offsetHeight属性。

Answer 2

我能够创建一个空的div，我在CSS中给出了一个高度和宽度。你可以看到我在这里做了什么：

CSS:

.content {
  width: 470px;
  height: 330px;
}

HTML:

<div class="content">  </div>

Answer 3

在容器中包含身体物品。将高度和宽度设置为容器。

//Css code
#container{
width:250px;
height:300px;
background-color:FFFFFF;
border-width:1px;
margin:0px;
padding:0px;
}

//html code
<!DOCTYPE html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
</head>
<div id="container">
<body>
...
</body>
<div>
</html>

我的Chrome扩展程序中的弹出窗口很小，并且不显示数据

3 个答案: