부모에게 '최소 높이'만 있을 때 내 자녀 Div가 높이를 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%;
}

아이 키가 아님 응답

컨테이너 요소에 min-height 값이 있는 경우 100% 사양에도 불구하고 하위 요소의 높이는 0으로 유지됩니다. 하지만 컨테이너 요소의 높이를 1px 정도의 작은 값으로 설정하면 하위 요소가 컨테이너를 채울 수 있습니다.

동작 이해

이유는 동작은 CSS의 높이 계산 특성에 있습니다. 상위 요소에 명시적으로 정의된 높이가 없는 경우(예: min-height의 경우) 해당 높이는 해당 내용에 따라 결정됩니다. 이 경우 해당 콘텐츠는 하위 요소입니다.

그러나 100%로 설정된 하위 요소의 높이는 포함 블록의 높이를 기준으로 계산됩니다. 포함 블록(상위 요소)에는 명시적으로 지정된 높이가 없으므로 하위 요소의 높이를 계산할 수 없습니다.

명시적으로 높이 정의

높이 설정 상위 요소는 작은 값이라도 포함 블록에 대한 명확한 높이를 제공합니다. 이를 통해 하위 요소는 상위 요소 높이의 100%로 높이를 계산할 수 있습니다.

주요 내용:

백분율 높이 계산에는 포함 블록에 대해 명시적으로 정의된 높이가 필요합니다. . 포함 블록에 min-height/max-height 값이 있지만 높이 값이 없는 경우 포함 블록의 높이가 명시적으로 정의될 때까지 하위 요소의 높이는 적용되지 않습니다.

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