Height auto makes element disappear

user_6790744 0
Viewed 790

I have divs with below CSS, when the height is set to auto div disappears (div with class one).

When height is set to some value in px then its visible (div with class two).

.one,
.two {
  display: block;
  width: 100px;
  background-color: rgb(67, 132, 245);
  position: fixed;
  border: 1px solid #000;
  bottom: 20px;
  background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
  background-size: 40px;
  background-position: center;
}

.one {
  height: auto;
  right: 20px;
}

.two {
  height: 100px;
  left: 20px;
}
<div class="one">
</div>

<div class="two">
</div>

css html
1 Answers

By default, a div element has a height of 0px and a width of 100%.

Edit: as @TemaniAfif pointed out in the comment below, this is not true for div elements with a fixed position as you are using. In that case, the default width is 0px as well. However, you specify a width for both of your div elements, so changing the height property alone changes whether your element is visible or not.

The default height of a div only increases if it has content (such as text, or other elements with a fixed height). Note that here, a background-image does not count as content, because it is just a CSS style.

In your example, div.one therefore has a height of 0px, because height: auto applies the default value. This is why it appears to be invisible.

div.two has a height of 100px, because that is what you specified for it. Therefore it is visible.

Additional Note:

What you may be getting confused about is the fact that an img element usually resizes automatically to the dimensions of the image it holds. However, the same thing does not apply for a div which has a background-image set.

user_121661160
Related