使 div 填充设置高度无内容

Question

我正在为 Google Chrome 开发一个扩展，其中一组格式化的 div 被注入以添加一个标尺，使阅读大量文本变得更容易。我现在正在设计 divs 的样式，问题是我给了 div 一个固定的高度，但是当我检查元素时，高度是 0 像素。

注入的HTML:

<div id="reading-lines-injected">
  <div id="top-bar-reading-line"></div>
  <div id="gap-reading-line"></div>
  <div id="bottom-bar-reading-line"></div>
</div>

CSS:

#reading-lines-injected {
    position: fixed;
    z-index: 9;
}
#top-bar-reading-line, #bottom-bar-reading-line {
    height: 20px;
    background-color: black;
    opacity: 70%;
}
#gap-reading-line {
    height: 15px;
}

我的目标是让 div 跨越 window 的整个宽度并具有 x 像素的高度，以便可以看到 div。如果可能的话，我也不希望 div 中出现文本。

感谢您的回答。

Answer 1

尝试将 position: relative 添加到您想要自定义的 div 的 CSS 中。

Answer 2

在容器上定义一个width。正如您所说，您希望它跨越整个 window，因此 width: 100% 将起作用。

此外，您还缺少两个 CSS 选择器之间的逗号，因此无论如何都不会应用任何样式。像这样：

#top-bar-reading-line,
#bottom-bar-reading-line

#reading-lines-injected {
  position: fixed;
  z-index: 9;
  width: 100%; /* define width to get height working */
}

#top-bar-reading-line,
#bottom-bar-reading-line {
  height: 20px;
  background-color: black;
  opacity: 70%;
}

#gap-reading-line {
  height: 15px;
}

<div id="reading-lines-injected">
  <div id="top-bar-reading-line"></div>
  <div id="gap-reading-line"></div>
  <div id="bottom-bar-reading-line"></div>
</div>

使 div 填充设置高度无内容

Make div fill set height with no content

html

css

google-chrome-extension