CSS에서 스크롤 막대를 제외하고 뷰포트 너비(vw)를 어떻게 결정할 수 있습니까?

CSS를 사용하여 스크롤바 제외 뷰포트 너비(vw) 결정

질의에서 언급했듯이 스크롤바 없이 뷰포트 너비(vw)만 계산합니다. CSS를 통해 어려울 수 있습니다. 기존 vw 측정에는 스크롤 막대가 차지하는 공간이 포함됩니다.

JavaScript가 없는 CSS 솔루션

그러나 CSS의 calc 함수를 사용하는 해결 방법이 있습니다. 100vw에서 100%(스크롤 막대가 있는 뷰포트 너비)와 100vw(스크롤 막대를 제외한 뷰포트 너비)의 차이를 빼면 스크롤 막대의 너비가 효과적으로 제거됩니다.

<code class="css">body {
  width: calc(100vw - (100vw - 100%));
}</code>

예

예를 들어 뷰포트 너비가 1920px이고 스크롤 막대가 17px를 차지하는 경우 결과는 다음과 같습니다.

100vw - (100vw - 100%) = 1920px - (1920px - 1903px) = 1903px

결론

이 계산식을 활용하면 스크롤바 없이 뷰포트 너비를 계산할 수 있어 실제 가시 영역을 보다 정확하게 표현할 수 있습니다.

위 내용은 CSS에서 스크롤 막대를 제외하고 뷰포트 너비(vw)를 어떻게 결정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!