CODEWITHSUNDEEP
htmlcssgoogle-chrome-extension
Kyle Hardinge
Kyle Hardinge

Reputation: 95

Make div fill set height with no content

I am working on an extension for Google Chrome where a set of formatted divs gets injected to add a ruler that makes it easier to read lots of text. I am working on styling the divs right now and the problem is that I have given the div a fixed height but when I inspect the element the height is 0 pixels.

The injected 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;
}

My goal is for the div to span the whole width of the window and have a height of x pixels so that the div can be seen. I also do not want there to be text in the div to make it appear if possible.

Thank you for your answers.

Upvotes: 0

Views: 275

Answers (2)

cela
cela

Reputation: 2510

Define a width on the container. As you said you want it to span the entire window, so width: 100% will work.

Also you were missing a comma between your two CSS selectors, so no styles would have been applied anyways. Like so:

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

Upvotes: 1

Tom&#225;š Sk&#225;la
Tom&#225;š Sk&#225;la

Reputation: 33

try to add position: relative into CSS of div which you want customize.

Upvotes: 0

Related Questions