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

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는 폴백 값입니다.

프레임워크(ASP)에서 작업하는 경우.예를 들어 NET) 상위 요소가 html을 감싼 다음 html을 설정합니다.max-width100%로 하면 "밴드 에이드" 솔루션을 사용하지 않고 문제를 해결할 수 있습니다.overflow-x: hidden.

html {
   max-width: 100%;
}

이유100vw수평 스크롤 막대는 다른 응답에서 잘 설명되어 있습니다.100vw세로 스크롤 막대의 너비를 html 자체로 계산합니다.나는 이것이 약간 터무니없다고 생각하지만, 그것은 사실입니다, 당신도 알잖아요 :)

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

---

원답

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

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

• 고장난 바이올린 연주display:table
• 작업 조작display:table그리고.width:100%

vw에 포함된 스크롤바 너비를 제거하기 위해 다음 작업을 수행해야 했습니다.

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

스테판 샤트코프스키의 방법에 영감을 받아, 저는 이것이 모든 경우에 효과가 있는 것은 아니라고 결론 내렸습니다.그래서 요소 크기 조정에 적합하도록 약간 수정했고 혼동을 피하기 위해 시각적으로 이름을 변경했습니다.

function vws() {
  let vws = document.documentElement.clientWidth / 100;
  document.documentElement.style.setProperty('--vws', `${vws}px`);
}
vws();
let ro_vws = new ResizeObserver(() => { vws(); });
ro_vws.observe(document.body); // add elements with potential scroll bar

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

시도할 수 있습니다.

*{ box-sizing: border-box}

콘텐츠가 화면 밖으로 흘러나오는 이유는 디브에 여분의 패딩이나 테두리가 있고 그것이 콘텐츠를 브라더스 밖으로 나오게 하기 때문일 수 있습니다.

언급URL : https://stackoverflow.com/questions/23367345/100vw-causing-horizontal-overflow-but-only-if-more-than-one