0

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

这是截图，供参考：

截屏

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

编辑：它会与固定或相对定位一起工作吗？

    <!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>
4

3 回答 3

2

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

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

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

  • 不要使用position:absolute.

  • 为根元素分配固定的宽度/高度（通过 CSS）。

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

于 2013-09-15T23:15:25.930 回答
0

在容器中包含身体的东西。将高度和宽度设置为容器。

//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>
于 2013-09-17T05:21:56.940 回答
0

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

CSS:

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

HTML:

<div class="content">  </div>
于 2013-09-16T20:35:45.623 回答