부모에게 '최소 높이'만 있는 경우 내 자식 요소가 높이를 상속받지 못하는 이유는 무엇입니까?

하위 요소 높이가 상위 최소 높이/최대 높이 및 명시적 높이 없음에 적용되지 않음

문제:

다음 CSS를 고려하십시오.

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 100%;
}

에도 불구하고 높이가 100%로 설정된 하위 요소의 경우 상위 요소에 최소 높이 값이 있지만 명시적인 높이가 없으면 높이를 차지하지 않습니다. 상위 요소의 높이가 1px로 설정된 경우에만 하위 요소가 컨테이너를 올바르게 채웁니다.

설명:

첫 번째 경우(명시적인 높이 없음) 상위), 다음과 같은 이유로 하위 키 백분율이 실패합니다.

CSS에 따르면 사양:

"포함 블록의 높이가 명시적으로 지정되지 않고(즉, 콘텐츠 높이에 따라 다름) 이 요소가 절대적으로 위치 지정되지 않은 경우 값은 'auto'로 계산됩니다."

최소 높이는 최소 경계만 제공하며 요소 높이는 여전히 콘텐츠에 따라 달라집니다.

설명하기 위해 다음 수정 사항을 고려하세요. 예:

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
  padding: 10px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 400px;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  from {
    height: 100px;
  }
}

여기서 컨테이너는 명시적으로 작은 패딩을 설정하여 하위 요소의 최대 높이가 300px보다 작아지도록 합니다. 애니메이션은 어린이의 키를 동적으로 변경하여 어린이의 키가 100% 높이 설정에만 의존하는 것이 아니라 사용 가능한 공간에 따라 결정된다는 점을 보여줍니다.

위 내용은 부모에게 '최소 높이'만 있는 경우 내 자식 요소가 높이를 상속받지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!