css bootstrap 100vw क्षैतिज अतिप्रवाह का कारण बनता है, लेकिन केवल एक से अधिक होने पर?



w3schools javascript (4)

स्क्रॉल को vw में शामिल किया जाएगा ताकि क्षैतिज स्क्रॉल आपको ऊर्ध्वाधर स्क्रॉल के नीचे देखने की अनुमति देने के लिए जोड़ा जाएगा।

जब आपके पास केवल 1 बॉक्स होता है, तो यह 100% चौड़ा x 100% लंबा होता है। एक बार जब आप 2 जोड़ते हैं, तो इसका 100% चौड़ा x 200% लंबा है, इसलिए ऊर्ध्वाधर स्क्रॉलबार को ट्रिगर करता है। जैसे-जैसे वर्टिकल स्क्रॉलबार को ट्रिगर किया जाता है, तब क्षैतिज स्क्रॉलबार को ट्रिगर किया जाता है।

आप overflow-x:hidden को जोड़ सकते हैं overflow-x:hidden body लिए overflow-x:hidden

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/

कहो कि आपके पास यह है:

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%" नहीं माना जाता है?


Answer #1

जैसा कि wf4 द्वारा पहले ही समझाया गया है, ऊर्ध्वाधर स्क्रॉल के कारण क्षैतिज स्क्रॉल मौजूद है। जिसे आप max-width: 100% देकर हल कर सकते हैं max-width: 100%

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

वर्किंग फिडल


Answer #2

width: 98vw; डाल width: 98vw;

और margin-left: 1vw;

इसे ऑफसेट करने के लिए, इसलिए कोई फर्क नहीं पड़ता कि आपके पास स्क्रॉल है या नहीं, लेकिन आपके पास इसे पुन: परिकलित किए बिना बीच में तत्व है।


Answer #3

अपडेट: क्रोम संस्करण 66 के रूप में, मैं अब प्रश्न द्वारा रिपोर्ट किए गए व्यवहार को पुन: पेश नहीं कर सकता। कोई वर्कअराउंड की आवश्यकता प्रतीत नहीं होती है।

मूल उत्तर

यह वास्तव में एक बग है जैसा कि इस उत्तर और उपरोक्त टिप्पणियों में बताया गया है।

जबकि स्वीकृत उत्तर में वर्कअराउंड (अतिरिक्त .box {max-width: 100%;} ) आम तौर पर काम करता है, मुझे यह उल्लेखनीय लगता है कि यह वर्तमान में display:table लिए काम नहीं करता है display:table (क्रोम में परीक्षण)। उस स्थिति में, मुझे जो एकमात्र समाधान मिला, वह width:100% का उपयोग करना है width:100% इसके बजाय width:100%





css