width and height percentage won’t have affect unless the element is occupied

I am having trouble understanding why when i am using percentages, i have no appearance on my screen, but when i use pixels i do.

this is my code:

  <div class="container-content"></div>
  width: 100%;
  height: 100%;
  width: 50%;
  height: 50%;
  margin: 0 auto 0 auto;
  background-color: green;

if i occupy my div with some content it will not have the affect i want. if i change the position to absolute or fixed it will have the affect i want (just a box). if i only change instead of percentages to pixels it will also have the affect i want (just a box).

what am i getting wrong here?


In cases like these, both the html/body elements need a height of 100%. In doing so, it should work.

Example Here

html, body {
  height: 100%;

The reason it wasn’t working was because the html element had an initial height of 0. Since all the children elements were using percentage based values, 100% of 0 is also 0 - thus nothing was appearing.