여러 개의 100vw 너비 요소가 수평 스크롤 막대를 생성하는 이유는 무엇입니까?

100vw 수평 오버플로 미스터리

웹 개발 영역에서 100vw 단위는 일반적으로 요소의 너비를 설정하는 데 사용됩니다. 전체 뷰포트 너비. 그러나 너비가 100vw인 여러 요소를 연속적으로 배치하면 흥미로운 문제가 발생합니다. 화면을 예상대로 채우는 대신 설명할 수 없는 가로 스크롤과 함께 세로 스크롤바가 나타납니다.

이 현상을 이해하기 위해 CSS 코드를 자세히 살펴보겠습니다.

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

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

단일 요소로, div는 스크롤 없이 전체 화면 너비를 채웁니다. 그러나 동일한 클래스로 다른 div를 추가하면 앞서 언급한 스크롤 문제가 발생합니다.

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

이 동작의 원인은 100vw의 특성에 있습니다. 뷰포트 너비의 100%를 나타내지만 뷰포트 크기의 변화에 ​​따라 변동하는 유동 단위입니다. 예를 들어, 사용자가 브라우저 창의 크기를 더 좁게 조정하면 div는 그에 따라 축소되어 100vw 너비를 유지합니다.

100vw를 사용하는 여러 div의 경우 창이 충분히 넓으면 측면에 들어갈 충분한 공간이 있습니다. -옆에서. 그러나 창이 특정 너비 아래로 줄어들면 div는 더 이상 줄어들 수 없습니다. 대신 겹쳐지기 시작하여 가로 오버플로가 발생합니다.

겹침으로 인해 세로 스크롤 막대가 나타납니다. 브라우저에는 사용자가 가로로 스크롤하고 겹치는 div 아래에 숨겨진 콘텐츠에 액세스할 수 있도록 스크롤 막대가 도입되었습니다.

이 문제를 해결하려면 div에 max-width 속성을 사용하여 최대 너비를 100으로 제한할 수 있습니다. %:

.box {
  max-width: 100%;
}

이렇게 하면 충분한 공간이 있는 한 div는 여전히 전체 뷰포트 너비를 차지합니다. 그러나 창이 좁아지고 div가 나란히 맞지 않으면 세로로 줄어들고 쌓이게 되어 가로 오버플로와 가로 스크롤의 필요성이 모두 제거됩니다.

위 내용은 여러 개의 100vw 너비 요소가 수평 스크롤 막대를 생성하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!