CSS에서 스크롤바 없이 뷰포트 너비를 계산할 수 있나요?

CSS에서 스크롤 막대 없이 뷰포트 너비 계산

질문: CSS만 사용하여 스크롤 막대를 제외한 뷰포트 너비(vw)를 결정할 수 있습니까?

답변: 예, CSS를 사용하면 스크롤 막대를 고려하지 않고 vw를 계산할 수 있습니다. 한 가지 방법은 calc() 함수를 사용하여 뷰포트 너비에서 스크롤 막대 너비를 뺍니다.

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

이 코드에서 100vw는 전체 뷰포트 너비를 나타내고 100%는 스크롤 막대가 없는 뷰포트 너비를 나타냅니다. (100vw - 100%) 항은 스크롤 막대 너비를 효과적으로 계산한 다음 100vw에서 이를 뺍니다.

추가 참고: 이 기술은 또한 다음과 같은 사각형의 높이를 계산하는 데 적용될 수 있습니다. 스크롤바 너비를 제외한 뷰포트 너비의 절반을 차지합니다.

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

위 내용은 CSS에서 스크롤바 없이 뷰포트 너비를 계산할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!