스크롤바없이 뷰포트 너비 (vw)를 계산할 수 있습니까?

82

제목에서 언급했듯이 vwCSS에서만 스크롤바없이 계산할 수 있습니까?

예를 들어, 내 화면의 너비는 1920px. vw반환 1920px, 좋은. 하지만 제 실제 몸통은 1903px.

1903pxCSS로만 값 을 검색 할 수있는 방법이 있습니까 (의 직계 자식뿐만 아니라 body), 아니면 JavaScript가 절대적으로 필요합니까?

css viewport-units

— 마튼 잔더
소스

2

하지만 ... 스크롤바는 뷰포트 너비에 포함되지 않습니다!?

— Danield

죄송 @Danield, 내가 업데이트 myquestion

— 마틴 잰더

우리가 거기에 놓은 인공 스크롤바에 대해 이야기하고 있다면 다음과 같은 것을 찾고있을 것입니다. width: calc(100vw - scrollbarWidth)여기서 'scrollbarWidth'는 15px와 같은 고정 값입니다

— Danield

@Danield 실제로 모든 기본 브라우저 스크롤러의 가변 너비가있는 크로스 브라우저 수정이 필요합니다.

— Marten Zander

2

저는 현재 Chrome v64에서 부트 스트랩 4를 사용하는 페이지에서 작업 중이며 %는 내부 너비 (스크롤바 제외)이고 vw는 외부 너비 (스크롤바 포함 너비)입니다. 따라서 vw를 사용할 수 없으며 OP와 같이 왜 그런지 이해가 안 돼요.

— Eric_B

113

이를 수행하는 한 가지 방법은 calc를 사용하는 것입니다. 내가 아는 한 100 %는 스크롤바를 포함한 너비입니다. 따라서 다음과 같이하면됩니다.

body {
  width: calc(100vw - (100vw - 100%));
}

스크롤바의 너비를 뺀 100vw를 얻습니다.

예를 들어 뷰포트의 50 % (스콜 바 너비의 50 % 빼기) 인 정사각형을 원하는 경우 높이로도이 작업을 수행 할 수 있습니다.

.box {
  width: calc(50vw - ((100vw - 100%)/2))
  height: 0
  padding-bottom: calc(50vw - ((100vw - 100%)/2))
}

— Mattias Ottosson
소스

40

이것은 놀랍지 만 안타깝게도 크기를 조정하는 요소가의 직접 자식 body이거나 너비가 같은 요소 인 경우에만 작동합니다 body(그렇지 않으면 100%잘못된 요소의 너비를 참조합니다). 어떤 경우에는 단순히 백분율을 사용할 수 있습니다. 내가 뭔가 빠뜨리지 않는 한?

— Nateowami

7

스크롤바를 계산하는 100vw가 실제로 문제가되는 경우, 즉 100vw 블록을 고정 너비의 컨테이너에 넣어야하는 경우에는 적합하지 않습니다.

— 확실히

52

수학 : 100vw - (100vw - 100%) = 100vw - 100vw + 100% = 100% 내가 뭔가 놓친 게 있나요?

— Kamil Kiełczewski

3

안타깝게도 절대 위치 요소에는 100 %를 사용할 수 없기 때문에 작동하지 않습니다. (

— Hrvoje Golcic

4

@TKoL 그의 솔루션이 실제로 문제를 해결하는 모든 경우에 width : 50 %도 잘 작동합니다. Kamil Kiełczewski가 맞습니다.이 솔루션은 쓸모가 없습니다.

— Eliezer Berlin

14

문서가로드되면 CSS 변수를 정의하는 자바 스크립트 줄을 추가하여이를 수행합니다.

document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");

그런 다음 CSS var(--scrollbar-width)에서 다른 너비의 스크롤바가 있거나없는 다른 브라우저에 필요한 조정을 수행 할 수 있습니다 . 당신은 대체, 필요한 경우 수평 스크롤 비슷한 일을 할 수있는 innerWidth과 innerHeight와 clientWidth함께 clientHeight.

— user11990065
소스

나에게 반환되는 크기는 필요한 것보다 두 배 더 큽니다. 힌트가 있습니까? 16px를 주지만 8px이면 충분합니다 ...

— Fabian Beyerlein

9

specs 에 따르면 뷰포트 상대 길이 단위는 스크롤바를 고려하지 않습니다 (실제로 존재하지 않는다고 가정).

따라서 의도 한 동작이 무엇이든 이러한 단위를 사용할 때 스크롤바를 고려할 수 없습니다.

— 마다 라의 유령
소스

다시 말하지만, vw사양에 따라 스크롤바의 존재를 인식하지 못합니다. 그래서 당신은 그것들을 고려할 수 없습니다.

— Madara의 유령

1

사양에 따르면 vw는 오버플로가 자동으로 설정되지 않는 한 스크롤바 너비를 없애고 vw 값에 대해 "숨김"처럼 작동합니다. 따라서 페이지가 오버플로되어야하는 경우 "스크롤"로 설정하십시오. overflow-x 및 overflow-y를 사용하면 표시 할 스크롤 막대를 선택할 수 있습니다.

— Kulvar

1

@Kulvar는 방금 크롬에서 시도했지만 body를 overflow-y: scrollvs로 overflow-y: auto설정해도 vw 단위의 계산 된 값이 변경되지 않는 것 같습니다. 특히 내 사이트에 3.82vw로 설정된 것이 있고 컴퓨터 너비는 1920px입니다. 오버플로 자동을 사용하면 3.82vw = 73.344px, 그런 다음 73.344px를 출력하는 오버플로 스크롤을 사용해 보았습니다. 올바른 경우 실제로 72.6946px를 출력해야 할 때

— TKoL

귀하의 경우는 100vw 경우 가능하면 100 % 100 %로 변경, 그래서 계정으로 스크롤됩니다

— 하이로

3

Webkit 브라우저는 스크롤바를 제외하고 다른 브라우저는 반환 된 너비에 포함합니다. 물론 이것은 문제로 이어질 수 있습니다. 예를 들어 높이를 동적으로 추가하는 ajax로 콘텐츠를 동적으로 생성 한 경우 Safari는 페이지 시각화 중에 레이아웃에서 다른 레이아웃으로 전환 할 수 있습니다. 좋아, 자주 발생하지는 않지만 알고 있습니다. 모바일에서는 문제가 적고 스크롤바가 일반적으로 표시되지 않습니다.

즉, 문제가 모든 브라우저에서 스크롤바없이 뷰포트 너비를 정확히 계산하는 것이라면 내가 아는 한 좋은 방법은 다음과 같습니다.

width = $('body').innerWidth();

이전에 설정 :

body {
    margin:0;
}

— Holden
소스

2

vw단위는 고려하지 않는 overflow-y경우 계정에 스크롤 막대를 overflow-y설정한다 auto.

로 변경 overflow-y: scroll;하면 vw단위는 스크롤바가없는 뷰포트가됩니다.

고려해야 할 단점 만 있습니다. 콘텐츠가 화면에 맞으면 스크롤바가 표시됩니다. 가능한 해결책은 javascript 에서로 변경하는 auto것 scroll입니다.

— 일라 리오 잉글 러
소스

1

그랬어 overflow-x?

— Eliran Malka

이것은 사실이 아닙니다. vw 장치에는 스크롤바 포함overflow-y: scroll;

— NoSkill

0

"calc"로 코드를 엉망으로 만들지 않고 작동하는 유일한 방법은 컨테이너 요소 크기를 100vw로 만드는 것입니다. overflow-x에 대한 컨테이너 주위에 래퍼 추가; 이렇게하면 스크롤바가 콘텐츠 위에있는 것처럼 컨테이너가 전체 너비가됩니다.

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
	html{ overflow-y: scroll; }
	html, body{ padding:0; margin: 0;}
	#wrapper{ overflow-x: hidden; }
	.row{ width: 100vw; }
	.row:after{ clear: both; content: ''; display: block; overflow: hidden; }
	.row-left{ background: blue; float: left; height: 40vh; width: 50vw; }
	.row-right{ background: red; float: right; height: 40vh; width: 50vw; }
	</style>
</head>
<body>

<div id="wrapper">
<div class="row">
	<div class="row-left"></div>
	<div class="row-right"></div>
</div>
</div>


</body>
</html>

스 니펫 확장

— SequenceDigitale.com
소스

0

케이스가 슬라이더와 비슷한 경우 : 많은 답변에 게시 된대로 너비 100 %는 스크롤 막대를 고려하지 않는 반면 100vw는 고려합니다. 창의 너비를 가져야하는 요소가 많고 이미 창 너비가 100 % 인 컨테이너 내부에 중첩 된 (또는 자연 블록 너비가 이와 같은) 요소가 많은 경우 다음을 사용할 수 있습니다.

컨테이너 용 디스플레이 플렉스
Flex : 0 0 100 % 하위 요소

— 파쿤도 비델라 페냐
소스

-3

가장 쉬운 방법은 html 및 body를 100vw로 설정하는 것입니다.

html, body{ width:100vw; overflow-x: hidden; overflow-y: auto; margin: 0; }

유일한 문제는 스크롤바가 표시되면 맨 오른쪽이 약간 잘린다는 것입니다.

— gonnavis
소스

-3

제 경우에는 div 100wh-230px를 설정해야하며 추가 스크롤 너비와 동일한 문제에 직면했습니다.

width: calc(100vw - (100vw - 100%) - 230px);

— 오마르 에라 바니
소스

-4

내 솔루션은 아니지만 전체 범위가 아닌 상대 요소에서 절대로 드롭 다운 전체 너비 메뉴를 만드는 데 도움이됩니다.

: root의 css var에서 스크롤을 얻어서 사용해야합니다.

:root{
 --scrollbar-width: calc(100vw - 100%);
}


div { margin-right: var(--scrollbar-width); }

https://codepen.io/superkoders/pen/NwWyee

— 데니스 사 벤코
소스

2

이것은 div가 루트에 있기 때문에 작동합니다. div가 루트에 없으면 중단됩니다. 이는 calc가 정의 된 위치가 아니라 참조되는 선택자를 기준으로 참조 될 때 해결되기 때문입니다. codepen.io/Pedr/pen/YorLPM

— Undistraction 19