एक div कंटेनर की सीमाओं से बचें

ठीक है, मैं समझता हूं कि एक डीआईवी का उद्देश्य अपने आंतरिक तत्वों को रखना है - मैं अन्यथा कहकर किसी को परेशान नहीं करना चाहता था। हालांकि, कृपया निम्नलिखित परिदृश्य पर विचार करें:एक div कंटेनर की सीमाओं से बचें

मेरा वेब पेज (जो पूरे पृष्ठ का केवल 70% चौड़ाई लेता है) एक कंटेनर (एक div) से घिरा हुआ है। हालांकि, पृष्ठ के शीर्ष पर स्थित मेरे नेविगेशन बार के तहत, मैं डब्ल्यू बैनर बनाना चाहता हूं जो पूरे पृष्ठ की चौड़ाई का 100% लेता है (जिसका अर्थ है कि इसे अपने कंटेनर की सीमाओं के बाहर विस्तार करना होगा कंटेनर केवल पृष्ठ की चौड़ाई का 70% ले रहा है)। http://www.petersonassociates.biz/

किसी को भी मैं यह कैसे हासिल कर लिए कोई सुझाव है:

यह मूल विचार है कि मैं पूरा करने के लिए कोशिश कर रहा हूँ है? मैं किसी भी मदद की सराहना करता हूं।

इवान

स्रोत

2011-10-14 Anonymous

वह विशेष साइट सबसे आसान तरीका के बारे में उपयोग करती है, जो एक छवि है: http://www.petersonassociates.biz/wp-content/themes/rapeterson/img/globalbg.jpg –

+1 "मैं नहीं चाहता था किसी को भी परेशान करने के लिए " – Brent

अगर मैं सही ढंग से समझ,

style="width: 100%; position:absolute;"

को प्राप्त करना चाहिए कि आप क्या जा रहे हैं।

स्रोत

2011-10-14 01:53:10 Dennis

ऐसा करने का अधिक अर्थात् सही तरीका यह है कि position:absolute से परहेज करें, अपने हेडर को अपने मुख्य कंटेनर से बाहर रखें।

उदाहरण:

<html> 
    <head> 
    <title>A title</title> 
    <style type="text/css"> 
     .main-content { 
     width: 70%; 
     margin: 0 auto; 
     } 
    </style> 
    </head> 
    <body> 
    <header><!-- Some header stuff --></header> 
    <section class="main-content"><!-- Content you already have that takes up 70% --></section> 
    <body> 
</html>

अन्य विधि (<section class="main-content"> में रखते हुए) के रूप में आप ने कहा कि गलत है, एक div (या अनुभाग) के रूप में, तत्व होते हैं माना जाता है, उनमें से सीमा से बाहर का विस्तार नहीं उनके माता-पिता div/खंड। आपको आईई में भी समस्याएं आती हैं (मुझे 7 या उससे कम कुछ भी विश्वास है, यह शायद आईई 6 या उससे कम हो सकता है) यदि आपका बच्चा div मूल div के बाहर फैला हुआ है।

स्रोत

2011-10-14 02:33:16

+1 यह मैं कैसे करूँगा इसके करीब है, लेकिन आप 'हेडर' शैलियों (या 'चौड़ाई: ऑटो') की चौड़ाई घोषणा छोड़ सकते हैं। डिफ़ॉल्ट रूप से ब्लॉक स्तर तत्व उतना चौड़ा है जितना कि इसमें तत्व होता है। इस तरह आप मार्जिन/पैडिंग जोड़ते समय मुद्दों में नहीं भागते हैं। मैं नहीं कहूंगा कि यह अधिक "अर्थपूर्ण" विधि है, लेकिन यह कम गन्दा है। – Brent

दोनों अच्छे अंक, मैंने शीर्ष पर अनावश्यक सीएसएस को हटाने के लिए ऊपर संपादित किया और कोड को और अधिक अर्थपूर्ण बनाने के लिए एचटीएमएल 5 तत्वों का उपयोग किया ... यह सही शब्द नहीं था, शायद अधिक उचित;) –

कुछ तरीके हैं जो आप कर सकते हैं।

निरपेक्ष पोजिशनिंग
की तरह दूसरों का सुझाव दिया है, अगर आप तत्व है कि आप 100% चौड़ाई और निरपेक्ष स्थिति के पेज सीएसएस गुणों के पार फैलाने के लिए चाहते हैं देना है, यह पेज की पूरी चौड़ाई अवधि होगा।

हालांकि, यह पृष्ठ के शीर्ष पर भी स्थित होगा, शायद आपकी अन्य सामग्री को अस्पष्ट कर देगा, जो आपकी 100% सामग्री के लिए जगह नहीं बनायेगा। पूर्ण पोजिशनिंग दस्तावेज़ प्रवाह से तत्व को हटा देती है, इसलिए यह कार्य करेगा जैसे आपकी नई तैनात सामग्री मौजूद नहीं है। जब तक कि आप यह गणना करने के लिए तैयार न हों कि आपका नया तत्व कहां होना चाहिए और इसके लिए जगह बनाना चाहिए, यह शायद सबसे अच्छा तरीका नहीं है।

चित्र: आप छवियों का एक संग्रह का उपयोग आप क्या चाहते हैं पर प्राप्त करने के लिए कर सकते हैं, लेकिन सौभाग्य इसे अपडेट करने या बनाने आदि अपने पृष्ठ के किसी भी हिस्से की ऊंचाई में परिवर्तन फिर से, रख-रखाव के लिए महान नहीं।

नेस्टेड DIVs
यह मैं कैसे आप यह कर सुझाव है। 100% चौड़ाई वाली किसी भी चीज के बारे में चिंता करने से पहले, मैं आपको दिखाऊंगा कि 70% केंद्रित रूप कैसे स्थापित करें।

<div class="header"> 
<div class="center"> 
    // Header content 
</div> 
</div> 
<div class="mainContent"> 
<div class="center"> 
    // Main content 
</div> 
</div> 
<div class="footer"> 
<div class="center"> 
    // Footer content 
</div> 
</div>

इस तरह सीएसएस के साथ:

.center { 
    width: 70%; 
    margin: 0 auto; 
}

अब तुम क्या प्रकट होता है, अपने केंद्रित सामग्री के चारों ओर एक कंटेनर है जब वास्तव में सामग्री की प्रत्येक पंक्ति पेज नीचे जा से बना है है एक युक्त div, एक अर्थपूर्ण और वर्णनात्मक वर्ग (जैसे हेडर, मुख्य सामग्री, आदि) के साथ, इसके अंदर एक "केंद्र" वर्ग के साथ।

इसी के साथ की स्थापना की, शीर्ष लेख बनाने "कंटेनर div से बाहर तोड़" दिखाई देते हैं उतना ही आसान है:

.header { 
    background-color: navy; 
}

और रंग पेज के किनारों तक पहुँचता है। किसी कारण से आप सामग्री ही पेज भर में फैलाने के लिए चाहते हैं, आप कर सकता है:

.header .center { 
    width: auto; 
}

और उस शैली .center शैली ओवरराइड होगा, और हेडर की सामग्री पृष्ठ के किनारों का विस्तार करना ।

गुड लक!

स्रोत

2011-10-14 03:18:56 rhodesjason

यदि आप केवल पूरे पृष्ठ में विस्तार करने के लिए तत्व की पृष्ठभूमि चाहते हैं तो इसे नकारात्मक मार्जिन के साथ भी हासिल किया जा सकता है।

संक्षेप में (टिप्पणी से सुधार):

.bleed { 
padding-left: 3000px; 
margin-left: -3000px; 
padding-right: 3000px; 
margin-right: -3000px; 
}

कि तुम क्षैतिज स्क्रॉल सलाखों जो आप के साथ हटाने देता है:

body {overflow-x: hidden; }

वहाँ http://www.sitepoint.com/css-extend-full-width-bars/ पर एक गाइड है। psuedo तत्वों के साथ ऐसा करने के लिए यह अधिक अर्थपूर्ण हो सकता है: http://css-tricks.com/full-browser-width-bars/

स्रोत

2013-10-31 22:11:32 Mark

100% काम, लेकिन 3000px किया, धन्यवाद – max4ever

बहुत बढ़िया! मैंने इस समाधान का इस्तेमाल किया (ओवरसफ्लो: छुपा हुआ) एक थ्रीव थीम्स वर्डप्रेस साइट पर कुछ मूर्खतापूर्ण शैलियों को दूर करने के लिए, और यह एक आकर्षण की तरह काम करता था। –

यह स्वीकार्य उत्तर होना चाहिए, स्थिति के रूप में: पूर्ण; फिक्स के शरीर से तत्व को हटा देता है, जिसके लिए अन्य तत्वों पर अतिरिक्त मार्कअप की आवश्यकता होती है ताकि यह सुनिश्चित किया जा सके कि पूर्ण तत्व चौड़ाई कोड द्वारा ओवरलैप नहीं किए गए हैं। – Adam

मुझे लगता है कि सभी समाधान पुराने हैं।

एक तत्व की सीमा से बचने के लिए सबसे अच्छा तरीका है जोड़कर है:

margin-left: calc(~"-50vw + 50%"); 
    margin-right: calc(~"-50vw + 50%");

चर्चा here और here पाया जा सकता है। आने वाले grid-layouts के लिए भी एक अच्छा समाधान है।

स्रोत

2017-09-18 15:11:04

यह टिप्पणी बहुत उपयोगी थी। मटेरियलाइज सीएसएस ग्रिड लेआउट कंटेनर से तोड़ने के लिए एक अच्छा समाधान खोजने की कोशिश कर रहा था और यह चाल थी – CDerrig

एक div कंटेनर की सीमाओं से बचें

उत्तर

संबंधित मुद्दे