दिलचस्प पोस्ट
एक शब्दकोश से एक आइटम हटाएं जावा में पूर्णांक और एक पूर्णांक और सी # के बीच अंतर क्या है? उत्प्रेरक का उद्देश्य। उदाहरण के साथ तैयार करना? बढ़ते घोंसले के शिकार फ़ंक्शन कॉल की सीमा मावेन अमान्य LOC शीर्षलेख (खराब हस्ताक्षर) जावास्क्रिप्ट में एस्केप उद्धरण अंतिम स्वच्छ / सुरक्षित फ़ंक्शन AngularJs में परिवर्तन केवल एक्स बार HttpServletRequest – सेटचरैक्टरइन्कोडिंग कुछ भी नहीं कर रहा है एक "मिश्रित" वेक्टर (पत्रों के साथ संख्या) आदेश दें मैं सशर्त ऑपरेटर का उपयोग कैसे करूं? क्या विंडो को संश्लेषण करता है खिड़की = _विंडो करता है? JTable getrelectedRow चयनित पंक्ति अनुक्रमणिका वापस नहीं करता है हैंडलर, संदेशक्यूउ, लूपर, क्या वे सभी यूआई थ्रेड पर चलते हैं? SQL सर्वर 2005 से डेटा को MySQL से निर्यात कैसे करें

सीएसएस – कैसे स्क्रीन से पूरी चौड़ाई के लिए div से अतिप्रवाह

मेरे पास एक संवेदनशील डिविएक्शन है, जो कि मैं अपने उत्तरदायी ग्रिड के हिस्से के रूप में उपयोग करता हूं। यह अधिकतम चौड़ाई तक फैलता है जो मुझे 1280px की अनुमति देता है, फिर बड़े डिवाइसेस के लिए मार्जिन दिखाई देता है। यहाँ मेरा सीएसएस + कम का एक छोटा सा है

.container { margin-left:auto; margin-right:auto; max-width:1280px; padding:0 30px; width:100%; &:extend(.clearfix all); } 

हालांकि कुछ अवसरों पर मैं बग़ल में ओवरफ्लो करना चाहता हूं- कहने के लिए कि मेरे पास एक पृष्ठभूमि की छवि या रंग है, जिसकी पूरी चौड़ाई होने की आवश्यकता है मैं सीएसएस पर अच्छा नहीं हूं – लेकिन क्या हासिल करना संभव है, मुझे क्या चाहिए?

वेब के समाधान से एकत्रित समाधान "सीएसएस – कैसे स्क्रीन से पूरी चौड़ाई के लिए div से अतिप्रवाह"

सबसे स्पष्ट समाधान सिर्फ कंटेनर बंद करने के लिए है … अपनी पूरी चौड़ाई div है तो एक नया कंटेनर खोलें शीर्षक 'कंटेनर' सिर्फ एक कक्षा है … एक पूर्ण आवश्यकता नहीं है कि यह सब एक ही समय में सब कुछ रखता है।

इस आवृत्ति में आप पृष्ठभूमि की पूरी चौड़ाई वाली डिवेल पर रंग लागू करते हैं और आपको आंतरिक, प्रतिबंधित डिवा में एक रंग लगाने की आवश्यकता नहीं है

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } .container { max-width: 80%; border: 1px solid red; margin: 0 auto; } .fullwidth { background: orange; } header { height: 50px; background: #663399; } .mydiv { /* background: orange; */ min-height: 50px; } footer { height: 50px; background: #bada55; } 
 <div class="container"> <header></header> </div> <div class="fullwidth"> <div class="container"> <div class="mydiv"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p> </div> <div class="mydiv"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p> </div> </div> </div> <div class="container"> <footer></footer> </div> 

margins पर vw का उपयोग करके मुझे यह सुपर उपयोगी चाल मिला ( स्रोत )

उदाहरण :

 .inner-but-full { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } 

डेमो:

 html,body { overflow-x: hidden; /* Prevent scrollbar */ } .inner-but-full { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); height: 50px; background: rgba(28, 144, 243, 0.5); } .container { width: 300px; height: 180px; margin-left: auto; margin-right: auto; background: rgba(0, 0, 0, 0.5); } 
 <div class="container"> <div class="inner-but-full"></div> </div>