Sourav Sourav - 1 month ago 5
CSS Question

div height is showing zero

I have the below less code. However, the image height is showing up as

360x0


.modal-submit {
.alert-icon {
width: 100%;
height: 100%;
min-height: 100%;
border: none;
background: #fff url(https://www.somepage/imagename.png) no-repeat center center;
background-size: 100px 100px;
}
}


Could you please help me out of this?

Answer

.alert-icon is setting to the height of .modal-submit. If there isn't any height set on modal-submit, .alert-icon also won't have a height.

.modal-submit {
  width: 100%;
  height: 200px;
} 

.alert-icon {
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: none;
  background: pink;
}
<div class="modal-submit">
  <h1>content content content</h1>
  <div class="alert-icon">
  </div>
</div>