CSS에서 백분율 높이가 예상대로 작동하지 않는 이유는 무엇입니까?

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

백분율로 작업할 때는 CSS의 블록 요소 고유 동작을 이해하는 것이 중요합니다. 기반 차원. 백분율 너비는 예상대로 작동하지만 백분율 높이는 개발자를 당황하게 만들 수 있는 역설적인 동작을 나타냅니다.

기본 높이 결정

기본적으로 블록 요소의 높이는 다음과 같습니다. 그 내용에 따라 결정됩니다. 즉, 요소는 해당 내용에 필요한 높이를 수용하기 위해 수직으로 확장됩니다. 이는 본질적으로 요소를 수평으로 확장하여 상위 요소 내의 사용 가능한 공간을 채우는 width 속성과 다릅니다.

백분율 역설

백분율을 사용하여 정의하는 경우 요소의 높이는 상위 요소 높이의 백분율을 나타냅니다. 그러나 상위 요소의 높이는 하위 요소의 높이에 따라 달라지는 경우가 많으므로 피드백 루프가 생성됩니다. 하위 요소의 높이를 백분율로 설정하면 작업할 구체적인 값이 제공되지 않습니다. 이는 상위 요소의 높이에 의존하고, 다시 하위 요소의 높이에 의존하기 때문입니다. 이 순환은 잘 정의된 차원의 설정을 방해합니다.

콘텐츠 중심 높이

콘텐츠와 무관한 너비와 달리 높이는 다음에 직접 영향을 받습니다. 요소에 포함된 콘텐츠입니다. 이러한 종속성으로 인해 상위 요소에 대한 특정 높이 값을 제공하는 것이 필수적이므로 피드백 루프를 중단하고 하위 요소의 높이 백분율에 대한 구체적인 참조 지점을 제공해야 합니다.

설명할 예

다음 코드를 고려하세요.

<div>
<pre class="brush:php;toolbar:false">#inner {
  height: 50%;
}

이 예에서 높이는 #inner는 #outer의 높이에 따라 달라집니다. 그러나 #outer의 높이는 #inner의 높이에 따라 달라집니다. #outer의 높이를 지정하지 않으면 피드백 루프로 인해 #inner가 잘 정의된 높이를 갖지 못하게 됩니다.