Wrong css styles

How to enable content visibility? Why it is not visible?

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

CSS styles:

body {
  margin: 0;
  padding: 0;
}
.header {
  padding-top: 0;
  margin-top: 0;
  height: 160px;
  background: #666;
}
.categories {
  position: absolute;
  height: 100%;
  width: 20%;
  background: #b6fd40;
}
.content {
  height: 100%;
  width: 100%;
  background: gray;
}

fiddle.


solution

The .content element isn’t being displayed because it has a height of 100% (which is being calculated as 0 in this case). Since neither of the element’s parent elements have a defined height, a height of 100% is essentially 0, since 100% of nothing is also nothing.

You could set the height of the html/body elements to 100%:

html, body {
  height: 100%;
}

If you don’t want the element to have a height of 100% of the body element, you could use calc() to subtract the height of the .header element as well:

Updated Example

.content {
  height: calc(100% - 160px);
  background: gray;
}

Alternatively, you could also use viewport percentage units such as 100vh. Since this unit isn’t always relative to the immediate parent element, you can use them without setting a height of 100% on the html/body element:

For instance:

.content {
  height: 100vh;
}

or:

.content {
  height: calc(100vh - 160px);
}