Diving away when taking content

Question

Diving away when taking content

Navigation

#1 by (2 votes)

1

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 inside this div, as in the case above (an H1 with an X) it normally appears

But when I shoot X (which will be the default of what I'm doing) it simply disappears.

I would like that when loading the page, it would appear even if it did not contain any content, since the content of the page will be added later by the user.

html css

asked by anonymous 07.12.2018 / 16:02

1 answer

Returning error in insert function How to make a Mask in pure JavaScript?

score 2 · Accepted Answer

It does not appear because it is probably in a container without a declared height in 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 can not calculate the percentage of 0.

If this div has the body as the parent, for example, and you give it a height, it will appear to be empty.

body{
   height: 100vh;
}

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

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

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

min-height: 100px;