0

I want to create a bar that is the size of my parent element, and 2rem wide. So I created an empty div in which I give these css properties, but it doesn't work, more exactly, it's the "height:100%" that is the problem, because if I replace it by "height:2rem" it works fine.

Can you explain me the reason ?

.container {
  background-color: red;
  width: 100%;
}

.bar {
  width: 2rem;
  height: 100%;
  background-color: black;
}
<div class="container">
  <h1>Hello world</h1>
  <div class="bar"></div>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
  • https://stackoverflow.com/questions/4171286/how-to-make-a-div-with-no-content-have-a-width – epascarello Jul 22 '21 at 15:16
  • this is the relevant answer you should lookup https://stackoverflow.com/questions/31728022/why-is-percentage-height-not-working-on-my-div/31728799#31728799 – Tiago Coelho Jul 22 '21 at 15:26

0 Answers0