CSS의 높이 백분율: 퍼즐 풀기
CSS를 사용할 때 직면하게 되는 일반적인 난제 중 하나는 너비와 너비에 대한 백분율 값 사이의 불일치입니다. 키. 너비의 백분율 값은 예상대로 작동하지만 높이의 경우에는 그렇지 않습니다.
#working 및 #not-working라는 두 요소가 있고 각각 너비와 높이에 대해 지정된 백분율 값이 있다고 가정해 보십시오. #working 요소는 예상대로 작동합니다. 너비는 뷰포트의 80%입니다. 그러나 #not-working 요소의 높이는 30%로 설정되었음에도 불구하고 0으로 유지됩니다.
블록 요소의 본질
이 수수께끼를 이해하려면 다음이 필요합니다. CSS의 블록 요소의 특성을 탐구합니다. 기본적으로
부모-자식 관계
백분율 값을 사용하여 블록 요소의 높이를 설정할 때 , 요소의 상위 컨테이너를 참조하고 있습니다. #not-working 요소에서 상위 요소는 특정 높이가 정의되지 않은 뷰포트입니다. 그로 인해 부모와 자식 사이에는 끝없는 피드백 루프가 존재하며, 키를 정확하게 판단할 수 없습니다.
피드백 루프 깨기
이 문제를 극복하려면 백분율 높이가 올바르게 작동하도록 허용하려면 상위 요소에 특정 높이를 제공하여 피드백 루프를 중단해야 합니다. 이는 하위 요소의 높이 백분율을 계산하기 위한 고정된 기준점을 제공합니다.
요약하자면, CSS의 높이에 대한 백분율 값은 모호성을 방지하고 정확한 계산을 가능하게 하기 위해 상위 요소의 높이가 정의되어 있어야 합니다. 고정된 상위 높이가 없으면 하위 요소의 높이는 0으로 유지됩니다.
위 내용은 백분율 높이가 백분율 너비처럼 CSS에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
