상위 요소에 '최소 높이'/'최대 높이'가 있지만 명시적인 높이가 없는 경우 하위 요소에서 '높이: 100%'가 실패하는 이유는 무엇입니까?

상위 요소에 최소 높이/최대 높이 값이 있지만 지정된 높이 값이 없는 경우 하위 요소에 높이: 100%가 적용되지 않는 이유는 무엇입니까?

다음 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 높이로 렌더링되지만 height: 100% 선언에도 불구하고 하위 요소는 높이 없이 유지됩니다.

그러나 컨테이너 요소에 작은 높이 값(예: 1px)을 추가하면 하위 요소가 갑자기 전체 컨테이너를 다음 높이로 채웁니다. 300px:

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

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

이 동작은 CSS 사양 자체에서 비롯됩니다. 요소의 높이가 명시적으로 정의되지 않은 경우 해당 하위 요소의 높이 백분율은 실패합니다. 사양에 따라:

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

초기 경우에는 컨테이너 요소의 높이가 명시적으로 설정되지 않은 경우 하위 요소의 높이: 100%는 'auto'가 됩니다. 즉, 콘텐츠가 요구하는 만큼만 공간을 차지하므로 높이가 표시되지 않습니다.

컨테이너 요소에 높이 값(1px만큼 작더라도)을 추가하면 높이가 명시적으로 정의되어 하위 요소가 허용됩니다. 요소 높이: 100%로 올바른 높이를 계산하고 적용합니다.

따라서 예상치 못한 동작은 상위 요소의 높이가 해당 하위 요소에 대해 명시적으로 정의되어야 한다는 사실에서 비롯됩니다. 비율 높이를 정확하게 계산합니다.

위 내용은 상위 요소에 '최소 높이'/'최대 높이'가 있지만 명시적인 높이가 없는 경우 하위 요소에서 '높이: 100%'가 실패하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!