html - div高度显示为零

Question

我有以下更少的代码。但是，图像高度显示为 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;
    }
}

你能帮我解决这个问题吗？

Answer 1

.alert-icon 设置为.modal-submit 的高度。如果在 modal-submit 上没有设置任何高度，.alert-icon 也不会有高度。

.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>