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

Question

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

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

Comments

html और शरीर पर छिपे हुए अतिप्रवाह से बचें, यह एक अच्छा समाधान नहीं है यदि आप अपने किसी भी बच्चे के तत्वों पर स्थिति चिपचिपा उपयोग करना चाहते हैं ... तो अधिकतम चौड़ाई एक अच्छा तरीका है !!!

— NeueDeutsche

Answer 1

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

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

वर्किंग फिडल

Comments

धन्यवाद, यह समस्या को ठीक करने के लिए अच्छी तरह से काम करता है, लेकिन मुझे अभी भी लगता है कि यह थोड़ा अनजाने में डिफ़ॉल्ट व्यवहार है।

— फॉक्स

Unintuitive होने के बारे में: caniuse.com के अनुसार यह एक ब्राउज़रबग है। caniuse.com/#feat=viewport-units -> ज्ञात समस्या 8: वर्तमान में सभी ब्राउज़र लेकिन फ़ायरफ़ॉक्स गलत तरीके से 100vw पूरे पृष्ठ की चौड़ाई को मानते हैं, जिसमें वर्टिकल स्क्रॉल बार भी शामिल है, जो अतिप्रवाह होने पर एक क्षैतिज स्क्रॉल बार पैदा कर सकता है: ऑटो सेट है ।

— जैकब वैन लिंगेन

यदि max-width: 100%स्क्रॉलपोर्ट के बिना व्यूपोर्ट की चौड़ाई है, तो आपको 100vwपहले स्थान की आवश्यकता नहीं थी :-) आप सिर्फ width: 100%इसलिए उपयोग कर सकते हैं क्योंकि तत्व में कोई भी पूर्वज नहीं है, इसलिए इसका संदर्भ शरीर है।

— कैप्सूल

यह कुछ भी हल नहीं करता है! अधिकतम-चौड़ाई केवल इसलिए काम करती है क्योंकि तत्व शरीर का प्रत्यक्ष परिशोधन है! किसी भी वास्तविक दुनिया के मामले में जहां आप 100% के बजाय 100vw का उपयोग करेंगे, (जैसे एक कंटेनर के अंदर एक तत्व), यह काम नहीं करेगा।

— एलिएजर बर्लिन

मैं चौड़ाई 100% का उपयोग नहीं कर सकता क्योंकि मेरा div एक कंटेनर में है जिसे मैं चौड़ाई या पैडिंग के बारे में नहीं जानता। यह 100% के बजाय 100vw का उपयोग करने का पूरा कारण है, इसलिए यह उत्तर व्यर्थ है। और यह मैक पर भी होता है यदि आपकी सेटिंग हमेशा स्क्रॉलबार दिखाना है, भले ही कोई स्क्रॉलबार न हो।

— कर्टिस

Answer 2

स्क्रॉलबार्स को शामिल किया जाएगा 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/

Comments

ऐसा करने से सामग्री स्क्रॉलबार के नीचे दिखाई देती है। jsfiddle.net/NBzVV/1 इसके लिए एक उपयुक्त समाधान होने के लिए आपको सही पैडिंग जोड़ने की आवश्यकता होगी।

— जेम्स डोनली

हाँ, अच्छी तरह से देखा। को जोड़ने max-width:100%से .boxरोका जा सकता है।

— wf4

"इसलिए क्षैतिज स्क्रॉल आपको ऊर्ध्वाधर स्क्रॉल के तहत देखने की अनुमति देने के लिए जोड़ा जाएगा" <- इस वाक्य ने मेरे मस्तिष्क को दृश्य समझ बनाने में मदद की कि वास्तव में क्या चल रहा था। +1

— इवान डर्स्ट

overflowयहां तक ​​कि अगर आप इसे सामान में से xकिसी में भी जोड़ते हैं तो भी एक नोट postition: stickyकाम करेगा।

— T.Chmelevskij

Answer 3

मुझे एक समान समस्या थी और जेएस और सीएसएस चर का उपयोग करके निम्नलिखित समाधान के साथ आया।

जे एस:

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

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

सीएसएस:

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

1vw एक फॉलबैक वैल्यू है।

Comments

इसे प्रेम करें। बहुत सुंदर

— andrevenancio

यह सही है क्योंकि यह विश्व स्तर पर उपलब्ध है। धन्यवाद।

— fvaldez421

यह इतनी बढ़िया तकनीक है, साझा करने के लिए धन्यवाद! एक गोटा यह है कि प्रारंभिक स्क्रिप्टिंग के लिए डोम लोड होने के बाद इस स्क्रिप्ट को चलाने की आवश्यकता होती है, इसलिए या तो इसे पाद लेख में रखें, या DOMContentLoaded घटना जोड़ें।

— खोदा

Answer 4

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

---

मूल उत्तर

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

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

• के साथ टूटी फीलdisplay:table
• के साथ काम कर रहे बेलाdisplay:table औरwidth:100%

Comments

उह, क्या स्वीकृत उत्तर बदल गया? आप स्वीकार किए गए उत्तर के रूप में एक ही बात का सुझाव दे रहे हैं। यही कारण है कि उत्तर खुद से पूरे होने चाहिए।

— Kissaki

स्वीकृत उत्तर को जोड़ने का प्रस्ताव है max-width: 100%। मैंने बदलने width: 100vwका प्रस्ताव रखा width: 100%। मैंने अपने उत्तर को स्व-निहित होने के लिए अद्यतन किया।

— कॉर्नफ्लेक्स

क्रोम के अलावा अन्य ब्राउज़र हैं, और कुछ स्क्रॉलबार के साथ अलग तरीके से व्यवहार करते हैं।

— लोकलपीसीग्युय

Answer 5

स्क्रॉलबार चौड़ाई से छुटकारा पाने के लिए vw में शामिल मुझे यह करना था:

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

Answer 6

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

Comments

किसी समस्या को छिपाने से उसका समाधान नहीं होता है। जबकि आपका दृष्टिकोण वास्तव में अतिप्रवाह को दूर करता है, यह बस इसे छुपाता है। यह तब समस्या पैदा कर सकता है जब सामग्री को बाहर प्रदर्शित किया जाना चाहिए (जो भी कारण हो)

— डैनियल स्टीनर

हे user13149444! कोड-केवल उत्तर समस्या का समाधान कर सकते हैं लेकिन वे बहुत अधिक उपयोगी हैं यदि आप बताते हैं कि वे इसे कैसे हल करते हैं। समुदाय को आपके उत्तर को पूरी तरह से समझने के लिए सिद्धांत के साथ-साथ कोड की आवश्यकता होती है।

— RBT