100vw로 인해 수평 오버플로가 발생하지만 둘 이상인 경우에만?

이것을 가지고 있다고 가정하십시오.

html, body {margin: 0; padding: 0}
.box {width: 100vw; height: 100vh}

<div class="box">Screen 1</div>

스크롤바없이 화면을 채우는 무언가를 얻을 수 있습니다. 그러나 다른 추가 :

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

수직 스크롤바 (예상)뿐만 아니라 약간의 수평 스크롤도 표시됩니다.

너비를 생략하거나 너비 : 100 %로 설정할 수 있다는 것을 알고 있지만 왜 이런 일이 발생하는지 궁금합니다. 100vw가 "뷰포트 너비의 100 %"로되어 있지 않습니까?

wf4에서 이미 설명했듯이 수직 스크롤 때문에 수평 스크롤이 존재합니다. 를 제공하여 해결할 수 있습니다 max-width: 100%.

.box {
    width: 100vw;
    height: 100vh;
    max-width:100%;  /* added */
}

작업 바이올린

스크롤바가 포함되어 vw가로 스크롤이 추가되어 세로 스크롤 아래를 볼 수 있습니다.

상자가 1 개뿐이면 너비 100 % x 높이 100 %입니다. 2를 추가하면 너비 100 % x 높이 200 %이므로 수직 스크롤바가 트리거됩니다. 수직 스크롤바가 트리거되면 수평 스크롤바가 트리거됩니다.

추가 overflow-x:hidden할 수 있습니다 .body

html, body {margin: 0; padding: 0; overflow-x:hidden;}
.box {width: 100vw; height: 100vh; background-color:#ff0000}
.box2 {width: 100vw; height: 100vh; background-color:#ffff00}

http://jsfiddle.net/NBzVV/

비슷한 문제가 있었고 JS 및 CSS 변수를 사용하여 다음 솔루션을 찾았습니다.

JS :

function setVw() {
  let vw = document.documentElement.clientWidth / 100;
  document.documentElement.style.setProperty('--vw', `${vw}px`);
}

setVw();
window.addEventListener('resize', setVw);

CSS :

width: calc((var(--vw, 1vw) * 100);

1vw는 대체 값입니다.

업데이트 : Chrome 버전 66부터 더 이상 질문에 의해보고 된 동작을 재현 할 수 없습니다. 해결 방법이 필요하지 않은 것 같습니다.

원래 답변

이것은 실제로이 답변 과 위의 의견 에서보고 된 버그 입니다.

허용 된 답변 (추가 .box {max-width: 100%;}) 의 해결 방법은 일반적으로 작동하지만 현재 display:table(Chrome에서 테스트 됨) 작동하지 않는다는 점이 주목할 만합니다 . 이 경우 내가 찾은 유일한 해결 방법은 width:100%대신 사용하는 것입니다.

• 바이올린 깨진 로display:table
• 바이올린 작업 로 display:table및width:100%

vw에 포함 된 스크롤바 너비를 제거하려면 다음을 수행해야합니다.

html, body {
    overflow-x: hidden;
    height: 100vh;
}

*,
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;/*add This*/ 
}
/*and enjoy ^_^ */