Div disappearing while taking content

Question

I have a simple div:

<div class="quadrant">
  <h1>X</h1>
</div>

//CSS
.quadrant {
  background-color: #E7E7E7;
  margin: auto;
  height: 40%;
  width: 20%;
}

When I have some element within that div, as in the case above (an H1 with an X) it appears normally

But when I take the X (which will be the pattern of what I’m doing) it just goes away.

I wish when loading the page, it would appear even if it had no content, because its content will be added later by the user.

Answer 1

It doesn’t show up because it’s probably in a container without a declared height in the CSS. This way the height is without reference, since it would be the percentage of the height of a parent element. If the parent element does not have a declared height, then it cannot calculate the percentage of 0.

If that div is the father of the body, for example, and you give it a height, it will appear really empty.

body{
   height: 100vh;
}

.quadrant {
  background-color: #E7E7E7;
  margin: auto;
  height: 40%;
  width: 20%;
}

<div class="quadrant">
</div>

What you can do, if you cannot set a height for the div container, is declare a minimum height in pixels. For example:

min-height: 100px;