내 CSS 높이(%)가 작동하지 않는 이유는 무엇입니까?

CSS 높이가 백분율로 작동하지 않음: 해결된 문제

요소의 높이를 100%로 설정하면 해당 요소가 컨테이너의 전체 높이에도 불구하고 해당 동작을 확인하지 못하면 실망스러운 경험이 될 수 있습니다. 이 문제는 요소의 상위 요소에도 정의된 높이가 있어야 하기 때문에 발생합니다.

이 문제를 해결하려면 모든 상위 요소에 100% 높이를 할당하세요. 제공된 예에서:

<div>
<p>상위 요소인 html과 body의 높이도 100%로 설정되어야 합니다.</p>
<pre class="brush:php;toolbar:false">html, body { height: 100%; width: 100%; margin: 0; }

모든 상위 요소의 높이가 명확한지 확인합니다. , 하위 요소인 div는 해당 컨테이너의 전체 높이를 올바르게 차지합니다. 그 이유는 높이가 포함된 요소를 기준으로 하고 해당 요소에 대해 정의된 높이가 없으면 100%가 무엇을 나타내는지 모호해지기 때문입니다.