부모에 '최소 높이'만 있는 경우 '높이: 100%'가 하위 요소에 작동하지 않는 이유는 무엇입니까?

부모에 최소 높이/최대 높이만 있는 경우 100%에도 불구하고 하위 높이가 실패하는 이유

주어진 HTML 스니펫에서 최소 높이가 있는 상위 컨테이너 요소 : 300px이고 명시적인 높이 값이 없으면 하위 요소의 높이가 100%가 됩니다. 실패.

동작 이해

CSS 사양에 따라:

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

제공된 시나리오에서는 컨테이너 요소의 높이가 명시적으로 정의되지 않습니다. 대신 콘텐츠와 최소 높이 값을 기준으로 결정됩니다. 결과적으로 하위 요소의 높이: 100%를 정확하게 계산할 수 없습니다.

명시적 높이 요구

컨테이너에 높이 값을 설정하면 1px만큼 작아도 명시적으로 포함 블록의 높이를 정의합니다. 이를 통해 하위 요소의 height: 100%가 올바르게 계산 및 적용되어 명시적인 높이 설정 없이도 전체 컨테이너를 채울 수 있습니다.

대체 접근 방식

원하는 동작이 하위 요소를 채우는 것인 경우 상위 요소의 높이에 관계없이 전체 상위 요소에 대한 한 가지 대안은 다음과 같은 CSS flexbox를 사용하는 것입니다.

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