CSS에서 스크롤 막대를 제외하고 뷰포트 너비(vw)를 계산하는 방법은 무엇입니까?

CSS에서 스크롤바 제외 뷰포트 너비(vw) 계산

원래 질문에서 언급했듯이 계산 없이 뷰포트 너비(vw) 얻기 스크롤바의 경우 CSS만 사용하면 어려울 수 있습니다. 그러나 이를 달성할 수 있는 calc() 함수와 관련된 해결 방법이 있습니다.

calc()에서 100%는 스크롤 막대를 포함한 뷰포트 너비를 나타냅니다. 100%와 100vw 사이의 차이를 빼면 스크롤 막대 너비를 효과적으로 무시할 수 있습니다.

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

이 표현식은 vw에서 스크롤 막대 너비를 뺀 것과 동일한 너비를 본문 요소에 할당합니다.

또한 이 접근 방식은 본문의 직계 하위 항목뿐만 아니라 모든 요소에 적용될 수 있습니다. 예를 들어, 스크롤 막대 너비를 제외하고 뷰포트의 50%를 차지하는 사각형을 만들려면:

<code class="css">.box {
  width: calc(50vw - ((100vw - 100%) / 2));
  height: 0;
  padding-bottom: calc(50vw - ((100vw - 100%) / 2));
}</code>

위 내용은 CSS에서 스크롤 막대를 제외하고 뷰포트 너비(vw)를 계산하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!