'100vw'가 때때로 예기치 않은 수평 오버플로를 일으키는 이유는 무엇입니까?

예기치 않은 수평 오버플로를 일으키는 100vw

요소에 너비 100vw를 할당하면 해당 요소가 요소 없이 전체 뷰포트 너비를 차지할 것으로 예상할 수 있습니다. 오버플로가 발생합니다. 그러나 특정 상황에서는 100vw를 사용해도 가로 스크롤 막대가 나타날 수 있습니다.

다음 예를 고려하세요.

html, body {
  margin: 0;
  padding: 0;
}
.box {
  width: 100vw;
  height: 100vh;
}

<div class="box">Screen 1</div>

이 시나리오에서는 .box 요소가 스크롤 막대 없이 화면을 채웁니다. 그러나 첫 번째 요소 아래에 두 번째 .box 요소를 추가하면

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

세로 스크롤 막대(예상)뿐 아니라 약간의 가로 스크롤 막대도 나타나는 것을 볼 수 있습니다.

이 동작의 이유는 브라우저에서 100vw를 해석하는 방식에 있습니다. 이는 "뷰포트 너비의 100%"를 의미하지만 스크롤바 두께를 고려한 후에도 남아 있는 뷰포트의 표시 부분을 나타냅니다. 이 경우 수직 스크롤 막대가 있으면 사용 가능한 뷰포트 너비가 줄어들어 두 번째 .box 요소가 수평으로 오버플로될 수 있습니다.

이 문제를 해결하려면 .box 요소:

.box {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
}

이렇게 하면 요소가 실제 뷰포트 너비를 초과하지 않게 되어 잠재적인 수평 오버플로를 효과적으로 방지할 수 있습니다.

위 내용은 '100vw'가 때때로 예기치 않은 수평 오버플로를 일으키는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!