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>

คุณไม่เพียง แต่จะได้รับแถบเลื่อนแนวตั้ง (คาดว่า) แต่ยังมีแถบเลื่อนแนวนอนเล็กน้อย

ฉันรู้ว่าคุณสามารถละความกว้างหรือตั้งค่าเป็น width: 100% แต่ฉันสงสัยว่าทำไมจึงเกิดเหตุการณ์นี้ขึ้น 100vw ควรเป็น "100% ของความกว้างวิวพอร์ต" ไม่ใช่หรือ

ตามที่อธิบายโดย wf4 แล้วการเลื่อนแนวนอนจะปรากฏขึ้นเนื่องจากการเลื่อนแนวตั้ง max-width: 100%ซึ่งคุณสามารถแก้ปัญหาโดยการให้

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

การทำงาน Fiddle

แถบเลื่อนจะรวมอยู่ใน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
• Working Fiddleกับdisplay:tableและwidth:100%

เพื่อกำจัดความกว้างของแถบเลื่อนที่รวมอยู่ใน vw ฉันต้องทำสิ่งนี้:

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

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