백분율 높이가 백분율 너비처럼 CSS에서 작동하지 않는 이유는 무엇입니까?

CSS의 높이 백분율: 퍼즐 풀기

CSS를 사용할 때 직면하게 되는 일반적인 난제 중 하나는 너비와 너비에 대한 백분율 값 사이의 불일치입니다. 키. 너비의 백분율 값은 예상대로 작동하지만 높이의 경우에는 그렇지 않습니다.

#working 및 #not-working라는 두 요소가 있고 각각 너비와 높이에 대해 지정된 백분율 값이 있다고 가정해 보십시오. #working 요소는 예상대로 작동합니다. 너비는 뷰포트의 80%입니다. 그러나 #not-working 요소의 높이는 30%로 설정되었음에도 불구하고 0으로 유지됩니다.

블록 요소의 본질

이 수수께끼를 이해하려면 다음이 필요합니다. CSS의 블록 요소의 특성을 탐구합니다. 기본적으로

와 같은 블록 요소는 콘텐츠에 따라 높이를 결정합니다. 이는 포함된 콘텐츠의 크기에 맞게 높이가 확장된다는 의미입니다.

부모-자식 관계

백분율 값을 사용하여 블록 요소의 높이를 설정할 때 , 요소의 상위 컨테이너를 참조하고 있습니다. #not-working 요소에서 상위 요소는 특정 높이가 정의되지 않은 뷰포트입니다. 그로 인해 부모와 자식 사이에는 끝없는 피드백 루프가 존재하며, 키를 정확하게 판단할 수 없습니다.

피드백 루프 깨기

이 문제를 극복하려면 백분율 높이가 올바르게 작동하도록 허용하려면 상위 요소에 특정 높이를 제공하여 피드백 루프를 중단해야 합니다. 이는 하위 요소의 높이 백분율을 계산하기 위한 고정된 기준점을 제공합니다.

요약하자면, CSS의 높이에 대한 백분율 값은 모호성을 방지하고 정확한 계산을 가능하게 하기 위해 상위 요소의 높이가 정의되어 있어야 합니다. 고정된 상위 높이가 없으면 하위 요소의 높이는 0으로 유지됩니다.

위 내용은 백분율 높이가 백분율 너비처럼 CSS에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.