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

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

Barbara Streisand

풀어 주다： 2024-11-05 13:24:02

원래의

550명이 탐색했습니다.

How to Calculate Viewport Width (vw) Excluding Scrollbar in CSS?

CSS에서만 스크롤 막대를 제외하고 뷰포트 너비(vw) 계산

질문이 생깁니다. CSS만으로 스크롤 막대를 제외한 vw를 결정할 수 있습니까? vw가 1920px를 반환하는 1920px 너비의 화면을 생각해 보세요. 그러나 실제 본문 너비는 약 1903px입니다.

이러한 불일치를 해결하려면 CSS calc() 함수를 활용하세요. 100vw 빼기(100vw - 100%)를 계산하면 결과 값은 스크롤 막대 너비를 제외한 vw를 나타냅니다.

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

로그인 후 복사

또한 이 기술은 높이 계산에도 적용될 수 있습니다. 예를 들어, 뷰포트 너비의 50%에서 스크롤 막대 너비의 50%를 뺀 크기를 차지하는 정사각형을 만들려면:

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

로그인 후 복사

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