'min-height' 또는 'max-height'를 사용할 때 상위 높이가 없는 하위 요소에 대해 '높이: 100%'가 작동하지 않는 이유는 무엇입니까?

최소/최대 높이가 있는 부모의 키 값 없이 어린이의 키: 100%가 적용되지 않는 이유

특정 시나리오에서 어린이가 요소는 높이: 100%로 설정되어 있으며 상위 요소에는 최소 높이 또는 최대 높이 값이 있지만 명시적인 높이 값이 없으면 자식이 원하는 높이를 상속받지 못할 수 있습니다. HTML, CSS 및 관련 CSS 사양을 통해 이러한 동작의 원인을 살펴보겠습니다.

다음 HTML 및 CSS 코드를 고려하세요.

<div class="container">
  <div class="child">
  </div>
</div>

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

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

문제:

위의 예에서 이 문서를 브라우저에서 보면 하위 요소가 전체 용기를 채우지 마십시오. 컨테이너의 최소 높이가 300px이고 하위 요소의 높이가 100%임에도 불구하고 하위 요소는 비어 있습니다(표시되는 높이 없음).

설명:

이 동작은 CSS 사양에서 비롯됩니다. 사양에는 다음과 같이 명시되어 있습니다.

"백분율 높이를 지정합니다. 백분율은 생성된 상자의 포함 블록 높이를 기준으로 계산됩니다. 포함 블록의 높이가 명시적으로 지정되지 않은 경우 (즉, 콘텐츠 높이에 따라 다름) 이 요소는 절대 위치가 지정되지 않았으며 값은 'auto'로 계산됩니다."

우리의 경우 컨테이너의 높이는 명시적으로 지정되지 않습니다. 콘텐츠에 따라 결정됩니다. 이 경우 콘텐츠는 하위 요소일 뿐입니다. 하위 요소에는 명시적인 높이가 없으므로(높이 백분율로 인해) 컨테이너의 높이는 본질적으로 정의되지 않습니다. 결과적으로 하위 요소의 높이 백분율도 정의되지 않습니다.

이 문제를 해결하고 하위 요소가 전체 컨테이너를 채우도록 하려면 다음 수정된 항목에서 볼 수 있듯이 컨테이너의 높이 값을 명시적으로 설정해야 합니다. CSS:

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

컨테이너 높이를 작은 값(이 경우 1px)으로 설정하면 하위 요소의 백분율 높이에 대한 참조 높이를 효과적으로 제공할 수 있습니다. 이렇게 하면 하위 요소가 컨테이너의 높이를 올바르게 상속하여 전체 컨테이너를 채울 수 있습니다.

위 내용은 'min-height' 또는 'max-height'를 사용할 때 상위 높이가 없는 하위 요소에 대해 '높이: 100%'가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!