css - Scrollbar when zooming in html page -

थोड़े सीएसएस पर एक noob प्रश्न

मेरे पास कुछ divs है

अब जब मैं उस पेज डिव 3 (जो वर्तमान में बायीं तरफ चल रहा है) में ज़ूम करता हूं, तो इससे अधिक फिट नहीं होता है इसलिए यह 2 डिवी 2 के नीचे सही हो जाता है। मैं पूरे पेज के लिए इस व्यवहार को कैसे बदल सकता हूं ताकि जब मैं ज़ूम इन हो तो स्क्रॉलबार दिखाई दे? मैंने अतिप्रवाह-एक्स सेट करने की कोशिश की: एक सीएसएस में पूरे शरीर के लिए स्क्रॉल करें लेकिन इसमें कोई प्रभाव नहीं पड़ा।

मैंने इसके लिए एक JSFiddle बनाया:

html

  & lt; div class = "first" & gt; div1 & lt; / div & gt; & Lt; div वर्ग = "दूसरा" & gt; div2 & lt; / div & gt; & Lt; div वर्ग = "तीसरा" & gt; div3 & lt; / div & gt; & Lt; div वर्ग = "चौथा" & gt; div4 & lt; / div & gt;  

सीएसएस

 । पहले {पृष्ठभूमि रंग: लाल; चौड़ाई: 400px; } .second {पृष्ठभूमि रंग: नीला; चौड़ाई: 200px; बाईंओर तैरना; }। तीसरे {पृष्ठभूमि रंग: हरा; चौड़ाई: 200px; बाईंओर तैरना; }। चौथा {स्पष्ट: दोनों; पृष्ठभूमि रंग: पीला; चौड़ाई: 400px; }  

ब्राउज़र में ज़ूम करने की कोशिश करें और आप देखेंगे कि div3 div2 में आता है। (क्रोम में वैसे भी)। मैं आमतौर पर एक समाधान का उपयोग करना चाहता हूं जो IE8 + और क्रोम दोनों में काम करता है।

धन्यवाद।

आपको बस एक रेप्पर डिवा जोड़ें और उसके लिए कुल चौड़ाई दें।

HTML

<पूर्व> & lt; div class = "wrap" & gt; & Lt; div वर्ग = "पहले" & gt; div1 & lt; / div & gt; & Lt; div वर्ग = "दूसरा" & gt; div2 & lt; / div & gt; & Lt; div वर्ग = "तीसरा" & gt; div3 & lt; / div & gt; & Lt; div वर्ग = "चौथा" & gt; div4 & lt; / div & gt; & Lt; / div & gt;

सीएसएस

 । लपेटें {width: 400px; }