CSS의 백분율 높이로 인해 때때로 예기치 않은 동작이 발생하는 이유는 무엇입니까?

CSS: 백분율 높이의 특이한 점 이해

CSS에서 높이 속성은 백분율 값을 사용할 때 난처한 문제가 될 수 있습니다. 상위 요소의 크기에 맞춰 손쉽게 확장되는 width와는 달리, 높이 백분율 값은 예상치 못한 동작을 초래하는 경우가 많습니다.

높이 누락의 미스터리

다음 HTML 및 CSS를 고려하세요.

<div>

#working {
  width: 80%;
  height: 140px;
  background: orange;
}
#not-working {
  width: 80%;
  height: 30%;
  background: green;
}

#working의 너비는 예상대로 뷰포트의 80%로 계산되지만 높이는 #not-workingly는 어리둥절하게 0이 됩니다.

종속성 깨기

이 문제의 핵심은 div와 같은 블록 요소의 기본 높이에 있습니다. 기본적으로 블록 요소의 높이는 해당 내용의 크기를 따릅니다. 이는 피드백 루프를 생성합니다.

<div>

여기서 #inner는 단락에 맞게 확장되고 #outer는 #inner를 수용하도록 확장됩니다.

백분율 높이 값은 여기에 다른 레이어를 추가합니다. 관계. 백분율 높이를 지정할 때(예: 30%) 이는 상위 요소의 높이를 나타냅니다. 그러나 상위 요소의 높이는 하위 요소의 높이에 영향을 받아 순환 종속성을 초래합니다.

해결책

이 딜레마를 해결하려면 피드백 루프를 깨뜨려야 합니다. 이는 상위 요소의 높이를 명시적으로 설정하여 하위 요소에 대한 종속성을 효과적으로 제거함으로써 달성할 수 있습니다. 예를 들어 위의 예에서는 #outer { height: 500px; }는 #outer 및 #not-working 모두에 대해 잘 정의된 계산을 제공합니다.

결론적으로 너비 백분율 값은 블록 요소 너비의 독립적 특성으로 인해 원활하게 작동하지만 높이 백분율 계산은 본질적으로 묶여 있습니다. 콘텐츠에 추가하고 상위 요소에 대한 명확한 높이 정의가 필요합니다.

위 내용은 CSS의 백분율 높이로 인해 때때로 예기치 않은 동작이 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!