100vw gây tràn ngang, nhưng chỉ khi nhiều hơn một?

Giả sử bạn có cái này:

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

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

Bạn sẽ nhận được thứ gì đó lấp đầy màn hình, không có thanh cuộn. Nhưng thêm một cái khác:

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

Bạn không chỉ nhận được thanh cuộn dọc (dự kiến), mà còn có một cuộn ngang nhẹ.

Tôi nhận ra rằng bạn có thể bỏ qua chiều rộng hoặc đặt nó thành chiều rộng: 100%, nhưng tôi tò mò tại sao điều này lại xảy ra. Không phải 100vw phải là "100% chiều rộng khung nhìn"?

Như đã được giải thích bởi wf4, cuộn ngang hiện diện vì cuộn dọc. mà bạn có thể giải quyết bằng cách đưa ra max-width: 100%.

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

Làm việc Fiddle

thanh cuộn sẽ được bao gồm trong vwvì vậy cuộn ngang sẽ được thêm vào để cho phép bạn xem bên dưới cuộn dọc.

Khi bạn chỉ có 1 hộp, nó có kích thước rộng 100% x cao 100%. Khi bạn thêm 2, chiều rộng 100% x chiều cao 200% của nó, do đó sẽ kích hoạt thanh cuộn dọc. Khi thanh cuộn dọc được kích hoạt, sau đó sẽ kích hoạt thanh cuộn ngang.

Bạn có thể thêm overflow-x:hiddenvàobody

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/

Tôi đã gặp sự cố tương tự và đã đưa ra giải pháp sau bằng cách sử dụng các biến JS và 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 là giá trị dự phòng.

Cập nhật: Kể từ phiên bản Chrome 66, tôi không thể tái tạo hành vi được báo cáo theo câu hỏi nữa. Không có giải pháp thay thế nào dường như là cần thiết.

Câu trả lời gốc

Đây thực sự là một lỗi như được báo cáo trong câu trả lời này và các nhận xét ở trên.

Mặc dù cách giải quyết trong câu trả lời được chấp nhận (thêm .box {max-width: 100%;}) thường hoạt động, tôi thấy đáng chú ý là nó hiện không hoạt động cho display:table(được thử nghiệm trong Chrome). Trong trường hợp đó, cách giải quyết duy nhất mà tôi tìm thấy là sử dụng width:100%thay thế.

• Vỡ Fiddle vớidisplay:table
• Làm việc Fiddle với display:tablevàwidth:100%

để loại bỏ chiều rộng thanh cuộn có trong vw, tôi phải làm điều này:

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

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