div 높이가 0으로 표시됩니다.

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의 높이로 설정됩니다. 모달 제출에 설정된 높이가 없으면 .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>

Answer 2

시도 표시 추가 : 경고 - 아이콘을하기 위해 컨테이너의 높이에 영향을주지 않습니다 떠

Answer 3

콘텐츠를 차단합니다. 요소에는 부동이지 않은 내용이 없습니다 (아무 것도 비어있는 것처럼 0의 컨테이너 높이를 중지하지 않습니다).

컨테이너에 overflow: hidden을 설정하면 새로운 블록 서식 지정 컨텍스트를 설정하지 않아도됩니다. CSS가 이런 식으로 설계된 이유에 대한 설명을 위해 다른 기술을위한 수레를 포함하고 수레를 포함하는 방법을보십시오.