Html 我的chrome扩展中的弹出窗口很小，不显示数据_Html_Css_Google Chrome_Google Chrome Extension_Popup

Html 我的chrome扩展中的弹出窗口很小，不显示数据

html css google-chrome google-chrome-extension

Html 我的chrome扩展中的弹出窗口很小，不显示数据,html,css,google-chrome,google-chrome-extension,popup,Html,Css,Google Chrome,Google Chrome Extension,Popup,我正在编写一个显示弹出窗口的Chrome扩展，但我无法控制内容的大小，只能显示一个小像素以下是一个屏幕截图，供参考：可以看到，两个渐变像素是滚动条，一个黑色像素是信息编辑：它会与固定或相对定位一起工作吗？ <!DOCTYPE html> <html> <head> <title>Getting Started Extension's Popup</title> <style type="text

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


入门扩展的弹出窗口
身体{
背景色：#ffffff；
背景图片：url（images/background.jpg）；
背景重复：无重复；
字体系列：MyriadPro常规、“Myriad Pro常规”、MyriadPro、“Myriad Pro”，
Helvetica，Arial，无衬线；
}
.profile_选项卡{
位置：绝对位置；
顶部：30px；
左：12px；
}
.settings\u选项卡{
位置：绝对位置；
顶部：124px；
左：12px；
}
.新闻标签{
位置：绝对位置；
顶部：218px；
左：12px；
}

弹出窗口的大小由根元素的宽度/高度决定，

，也称为

document.documentElement

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

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

不要使用
```
位置：绝对
```
为根元素指定一个固定的宽度/高度（通过CSS）
使用JavaScript计算最大元素的宽度/高度，并将结果分配给
```
document.documentElement.style.width
```
和
```
高度
```
。最通用的方法（=遍历所有元素并使用计算其底部/右侧偏移量）相当昂贵。因为您可能预先知道页面的外观，所以您将能够创建一个更有效的方法。例如：选择最大的元素并读取其
```
.scrollHeight
```
或
```
.offsetHeight
```
属性

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

CSS:

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

HTML:

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

CSS:
.内容{
宽度：470px；
高度：330px；
}
HTML:

将尸体放在容器中。设置容器的高度和宽度

//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>

//Css代码
#容器{
宽度：250px；
高度：300px；
背景色：FFFFFF；
边框宽度：1px；
边际：0px；
填充：0px；
}
//html代码
入门扩展的弹出窗口
...

嗨！欢迎加入。请给我们提供代码。否则，我不清楚你在问什么，这个问题可能很快就会被搁置。你能建议一种方法，让我使用绝对以外的东西吗？我对网络开发非常陌生，我制作了一个PSD框架，我将其切割并使用

position:absolute

将每个图像与其他图像对齐。我该做张桌子吗？或者你有没有其他你认为更好的方法？谢谢在您的特定情况下，为div设置

宽度就足够了。您可能还希望使用margin
在元素之间添加更多空间。