क्या सीएसएस का उपयोग करते हुए माता-पिता की डीआईवाई की तुलना में एक बच्चे को डिव की चौड़ाई व्यापक बनाने का कोई तरीका है?

Question

क्या माता-पिता कंटेनर DIV के भीतर एक बच्चा DIV होने का एक तरीका है जो कि माता-पिता की तुलना में व्यापक है। बच्चा DIV को ब्राउज़र व्यूपोर्ट की समान चौड़ाई की आवश्यकता है।

नीचे उदाहरण देखें:

बच्चे को DIV को पैरेंट डिव के बच्चे के रूप में रहना चाहिए । मुझे पता है कि मैं इसे व्यापक बनाने के लिए चाइल्ड डिव पर मनमाने ढंग से नकारात्मक मार्जिन सेट कर सकता हूं, लेकिन मैं यह काम नहीं कर सकता कि इसे अनिवार्य रूप से ब्राउज़र की 100% चौड़ाई कैसे बनाऊं।

मैं जानता हूँ मैं यह कर सकता हूँ:

.child-div{
    margin-left: -100px;
    margin-right: -100px;
}

लेकिन मुझे उस बच्चे की ज़रूरत है जो ब्राउज़र के समान है जो गतिशील है।

अपडेट करें

आपके उत्तर के लिए धन्यवाद, ऐसा लगता है कि अब तक का निकटतम उत्तर बच्चे को DIV की स्थिति बनाना है: निरपेक्ष, और बाएँ और दाएँ गुणों को 0 पर सेट करें।

मेरे पास अगली समस्या यह है कि माता-पिता की स्थिति है: रिश्तेदार, जिसका अर्थ है कि बाएं और दाएं गुण अभी भी माता-पिता और ब्राउज़र के सापेक्ष हैं, यहां उदाहरण देखें: jsfiddle.net/v2Tja/2

मैं बाकी सब कुछ खराब किए बिना माता-पिता के सापेक्ष स्थिति को हटा नहीं सकता।

Comments

आपकी आवश्यकताओं को वास्तव में कोई मतलब नहीं है। "चाइल्ड डिव" को माता-पिता के डिव के बच्चे के रूप में रहना चाहिए, और फिर भी माता-पिता के पास position: relativeक्या है ? आपको किस चीज की आवश्यकता position: relativeहै? मुझे लगता है कि मैं क्या पूछ रहा हूं: आप क्या करने की कोशिश कर रहे हैं?

— २१:

@ सहकर्मी क्या आपने मेरे उत्तर पर मेरी टिप्पणी देखी? वह मेरे लिए काम करता है, मेरी वेबसाइट edocuments.co.uk को भी देखें जो आप एक अलग तरीके से करने की कोशिश कर रहे हैं

— Blowsie

@ ट्वीट्स के अलावा, वास्तव में आपके समाधान में किसी भी jquery / js की ज़रूरत नहीं होनी चाहिए

— Blowsie

Answer 1

पूर्ण स्थिति का उपयोग करें

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Comments

ठीक है, अगला सवाल, क्या होगा अगर माता-पिता या किसी अन्य पूर्वज का लेआउट यानी स्थिति: रिश्तेदार, देखें: jsfiddle.net/v2Tja/2

— कैंपस

कैसे एक और माता पिता की स्थिति के बारे में: स्थिर, और एक और div स्थिति के साथ अंदर: रिश्तेदार? jsfiddle.net/blowsie/v2Tja/3

— Blowsie

क्या ऐसा करने का एक तरीका है, .child-div की ऊंचाई ऑटो के साथ और नीचे अभी भी सही प्लेसमेंट है?

— फिलिप गिल्बर्ट

और माता-पिता को "अतिप्रवाह: छिपा हुआ" ^ ^

— क्रिस

@Blowsie तरीके के बारे में position:fixed । यह ठीक से काम क्यों नहीं करता है?

— मुस्तफा ग़दीमी

Answer 2

यहाँ एक सामान्य समाधान है जो दस्तावेज़ प्रवाह में बच्चे के तत्व को रखता है:

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

हमने widthपूरे व्यूपोर्ट की चौड़ाई को भरने के लिए चाइल्ड एलिमेंट को सेट किया है, फिर हम स्क्रीन के किनारे leftको व्यूपोर्ट के आधे हिस्से की दूरी से आधे व्यूपोर्ट के आधे हिस्से की दूरी पर ले जाकर बनाते हैं ।

डेमो:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}

<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

Vw और calc () के लिए ब्राउज़र समर्थन आमतौर पर IE9 और नए के रूप में देखा जा सकता है।

नोट: यह मानता है कि बॉक्स मॉडल पर सेट है border-box। इसके बिना border-box, आपको पैडिंग और सीमाओं को घटाना होगा, जिससे यह समाधान गड़बड़ हो जाएगा।

नोट: यह आपके स्क्रॉलिंग कंटेनर के क्षैतिज ओवरफ़्लो को छिपाने के लिए प्रोत्साहित किया जाता है, क्योंकि कुछ ब्राउज़र कोई अतिप्रवाह नहीं होने के बावजूद एक क्षैतिज स्क्रॉलबार प्रदर्शित करने का विकल्प चुन सकते हैं।

Comments

तुम्हें क्या पता, यह वास्तव में IE9 में काम करता है। +1 नाइस

— कैटशॉज़

यह वही था जो मैं बहुत धन्यवाद के लिए धन्यवाद की तलाश में था। IMO यह स्वीकार किए जाते हैं की तुलना में बेहतर उत्तर है क्योंकि यह दस्तावेज़ प्रवाह को नहीं तोड़ता है

— Rémi

vw अच्छा नहीं है अगर आपके पास वर्टिकल स्क्रॉलबार है तो 100vw आपको एक क्षैतिज स्क्रॉलबार देगा।

— सनी

ऐसा लगता है कि यह केवल एक स्तर नीचे काम करता है। क्या इसके लिए कोई रास्ता नहीं है कि बच्चे के तत्व में कितने मूल तत्व हैं या नहीं।

— मिथोफैक्लोन

position: relativeमाता-पिता में व्यापक बाल तत्व को लपेटने का यह सही उत्तर है !

— हनफी सुन

Answer 3

मैंने लंबे समय तक इस समस्या के समाधान के लिए दूर-दूर तक खोज की है। आदर्श रूप से हम बच्चे को माता-पिता से बड़ा चाहते हैं, लेकिन माता-पिता की बाधाओं को पहले से जाने बिना।

और मुझे अंत में यहाँ एक शानदार सामान्य उत्तर मिला । इसे शब्दशः कॉपी करना:

यहां विचार यह है: कंटेनर को बाईं ओर ब्राउज़र विंडो के ठीक बीच में धकेलें: 50%;, फिर इसे नकारात्मक -50 vw मार्जिन के साथ बाएं किनारे पर वापस खींचें।

.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Comments

मैंने पाया कि अगर मैं चाहता हूं कि यह कहा जाए, तो 90% व्यूपोर्ट चौड़ाई, मैं ऊपर लेकिन सेट चौड़ाई का उपयोग कर सकता हूं 90vw। इसके अलावा, ऐसा प्रतीत होता है कि margin-rightकिसी भी मामले में इसका कोई प्रभाव नहीं है।

— जेसन ड्युफ़ेयर

मार्जिन-लेफ्ट और राइट वैल्यू बदलने के कारण मेरा रैपर व्यूपोर्ट की चौड़ाई का 80% है। इसलिए मेरे मामले में इसे मार्जिन-लेफ्ट होना चाहिए: -10vw और मार्जिन-राइट: -10vw और फिर इसने पूरी तरह से काम किया! धन्यवाद!

— टिमोथीस ट्राईबेल

यह एक शानदार जवाब था! धन्यवाद।

— cullanrocks'

Answer 4

आपके सुझाव मूल सुझाव (नकारात्मक मार्जिन सेट करना) के आधार पर, मैंने गतिशील ब्राउज़र चौड़ाई के लिए प्रतिशत इकाइयों का उपयोग करके एक समान विधि के साथ आने की कोशिश की है:

एचटीएमएल

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
        </div>
    </div>
</div>

सीएसएस:

.child-div{
   margin: 0 -100%;
   padding: 0 -100%;
}

.parent {
    width: 60%;
    background-color: red;
    margin: 0 auto;
    padding: 50px;
    position:relative;
}

.grandparent {
        overflow-x:hidden;
        background-color: blue;
        width: 100%;
        position:relative;
    }

नकारात्मक मार्जिन सामग्री को पेरेंट DIV से बाहर जाने देगा। इसलिए मैंने padding: 0 100%;सामग्री को Chlid DIV की मूल सीमाओं पर वापस धकेलने के लिए सेट किया ।

नकारात्मक हाशिये .child-div की कुल चौड़ाई ब्राउज़र के व्यूपोर्ट से बाहर निकलती है, जिसके परिणामस्वरूप क्षैतिज स्क्रॉल होता है। इसलिए हमें overflow-x: hiddenएक ग्रैंडपेरेंट DIV (जो कि पैरेंट डिवोर्स का जनक है) को लागू करके एक्सट्रूज़न की चौड़ाई को क्लिप करने की आवश्यकता है :

यहाँ JSfiddle है

मैंने कोशिश की निल्स कास्पर्सन की left: calc(-50vw + 50%); यह Chrome & FF (IE के बारे में निश्चित रूप से अभी तक निश्चित नहीं) में पूरी तरह से ठीक काम करता है, जब तक मुझे पता नहीं चला कि सफारी ब्राउज़र इसे ठीक से नहीं करता है। आशा है कि उन्होंने इसे जल्द ही ठीक कर लिया है क्योंकि मुझे वास्तव में यह सरल विधि पसंद है।

यह आपकी समस्या को भी हल कर सकता है जहां मूल DIV तत्व होना चाहिए position:relative

इस समाधान विधि की 2 कमियां हैं:

• अतिरिक्त मार्कअप की आवश्यकता होती है (यानी एक दादा-दादी तत्व (सिर्फ अच्छे राजभाषा तालिका की तरह लंबवत संरेखित विधि यह नहीं है ...)
• बाल DIV की बाईं और दाईं सीमा कभी नहीं दिखाई देगी, केवल इसलिए कि वे ब्राउज़र के व्यूपोर्ट के बाहर हैं।

कृपया मुझे बताएं कि क्या इस पद्धति के साथ कोई समस्या है;) आशा करता हूँ की ये काम करेगा।

Answer 5

फ्लेक्सबॉक्स का उपयोग सीएसएस की तीन पंक्तियों के साथ एक बच्चे को उसके माता-पिता से व्यापक बनाने के लिए किया जा सकता है।

केवल बच्चे को display, margin-leftऔर widthसेट करने की आवश्यकता है। margin-leftबच्चे पर निर्भर करता है width। सूत्र है:

margin-left: calc(-.5 * var(--child-width) + 50%);

सीएसएस चर का उपयोग बाएं मार्जिन की मैन्युअल रूप से गणना करने से बचने के लिए किया जा सकता है।

डेमो # 1: मैनुअल गणना

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
}

.wide {
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

डेमो # 2: सीएसएस चर का उपयोग करना

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width) + 50%);
  width: var(--child-width);
}

.wide {
  --child-width: 75vw;
}

.full {
  --child-width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Answer 6

मैंने इसका उपयोग किया:

एचटीएमएल

<div class="container">
 <div class="parent">
  <div class="child">
   <div class="inner-container"></div>
  </div>
 </div>
</div>

सीएसएस

.container {
  overflow-x: hidden;
}

.child {
  position: relative;
  width: 200%;
  left: -50%;
}

.inner-container{
  max-width: 1179px;
  margin:0 auto;
}

Answer 7

आप स्थिति की कोशिश कर सकते हैं: निरपेक्ष। और चौड़ाई और ऊंचाई दें, शीर्ष: 'y अक्ष ऊपर से' और बाएँ: 'x- अक्ष'

Answer 8

मेरा मुद्दा भी ऐसा ही था। बाल तत्व की सामग्री को मूल तत्व में रहना चाहिए था जबकि पृष्ठभूमि को पूर्ण व्यूपोर्ट चौड़ाई का विस्तार करना था।

मैंने इस मुद्दे को बाल तत्व बनाकर position: relativeऔर इसके साथ एक छद्म तत्व ( :before) जोड़कर हल किया position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;। छद्म तत्व वास्तविक बच्चे के पीछे छद्म पृष्ठभूमि तत्व के रूप में रहता है। यह सभी ब्राउज़रों में काम करता है (यहां तक ​​कि IE8 + और सफारी 6+ - पुराने संस्करणों का परीक्षण करने की संभावना नहीं है)।

छोटा उदाहरण फिडल: http://jsfiddle.net/vccv39j9/

Comments

यह काम करने लगता है, लेकिन यह चौड़ाई 4000px के बाद से ब्राउज़र को एक क्षैतिज स्क्रोलबार दिखाने का कारण बनता है। व्यूपोर्ट की चौड़ाई के भीतर छद्म तत्व रखने के लिए वर्कअराउंड क्या है?

— आरोन हुडोन

बेशक आपको बॉडी या पेज रैपिंग डिव पर सेट करना होगा overflow-x: hidden।

— Seika85

Answer 9

Nils Kaspersson के सॉल्यूशन को जोड़ते हुए, मैं वर्टिकल स्क्रॉलबार की चौड़ाई के लिए भी हल कर रहा हूं। मैं 16pxएक उदाहरण के रूप में उपयोग कर रहा हूं , जिसे व्यू-पोर्ट चौड़ाई से घटाया गया है। यह क्षैतिज स्क्रॉलबार को प्रदर्शित होने से बचाएगा।

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));

Comments

मेरा मानना ​​है कि 16pxजिसे आपको घटाना है, क्योंकि यह क्षैतिज स्क्रॉलबार ब्राउज़र का डिफ़ॉल्ट मार्जिन / पैडिंग है, इसके बजाय इसे घटाना केवल इस html, body{ margin:0; padding:0 }प्रकार उपयोग करते हैं - यो-यू के लिए अतिरिक्त गणना करने की आवश्यकता नहीं है16px

— Mi-Creativity

यह तब होता है जब पृष्ठ की सामग्री लंबी होती है और तह के नीचे जाती है और स्क्रॉल बार अपने आप दिखाई देता है। बेशक, जब सामग्री गुना के भीतर होती है, तो इसकी आवश्यकता नहीं होती है। मैं सूत्र में 16px तभी जोड़ता हूं जब मुझे पता होता है कि पेज की सामग्री लंबी होने वाली है और स्क्रॉल बार वास्तव में दिखाई देगा।

— ए-ज़ोन

मुझे लगता है कि यह मोबाइल पर काम नहीं करेगा। मोबाइल में कोई स्क्रॉलबार नहीं है।

— hjchin

Answer 10

मान लें कि माता-पिता के पास एक निश्चित चौड़ाई है, उदा #page { width: 1000px; }और केंद्रित है #page { margin: auto; }, तो आप चाहते हैं कि बच्चा उस ब्राउज़र व्यूपोर्ट की चौड़ाई फिट कर सके जो आप बस कर सकते हैं:

#page {
    margin: auto;
    width: 1000px;
}

.fullwidth {
    margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
    width: 100vw;
}

Answer 11

बाल div को सामग्री के रूप में व्यापक बनाने के लिए, यह प्रयास करें:

.child{
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;
}

Answer 12

.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}

Comments

चतुर, लेकिन काम करने के लिए प्रतीत नहीं होता (ली के भीतर एम्बेडेड स्पैन के साथ, कम से कम)।

— रफिन

Answer 13

मुझे पता है कि यह पुराना है, लेकिन किसी के पास इस जवाब के लिए आने के लिए कि आप ऐसा करेंगे:

मूल तत्व, जैसे शरीर जैसे तत्व पर छिपा हुआ अतिप्रवाह।

अपने बच्चे के तत्व को अपने पृष्ठ की तुलना में अधिक व्यापक रूप से विस्तृत करें, और इसे पूर्ण-बाईं ओर -100% पर रखें।

एक उदाहरण है:

body {
  overflow:hidden;
}

.parent{
  width: 960px;
  background-color: red;
  margin: 0 auto;
  position: relative;    
}

.child {
  height: 200px;
  position: absolute;
  left: -100%;
  width:9999999px;
}

इसके अलावा एक जेएस फिडेल: http://jsfiddle.net/v2Tja/288/

Answer 14

तब समाधान निम्नलिखित होगा।

एचटीएमएल

<div class="parent">
    <div class="child"></div>
</div>

सीएसएस

.parent{
        width: 960px;
        margin: auto;
        height: 100vh
    }
    .child{
        position: absolute;
        width: 100vw
    }

Comments

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन यह समस्या का हल कैसे और / या इसके बारे में अतिरिक्त संदर्भ प्रदान करता है, इससे उत्तर के दीर्घकालिक मूल्य में सुधार होगा।

— आर बालासुब्रमण्यन

Answer 15

मैंने आपके कुछ उपाय आजमाए। यह वाला :

margin: 0px -100%;
padding: 0 100%;

अभी तक सबसे अच्छा है, क्योंकि हमें छोटे पर्दे के लिए अतिरिक्त सीएसएस की आवश्यकता नहीं है। मैंने परिणाम दिखाने के लिए एक कोडपेन बनाया: मैंने पृष्ठभूमि छवि के साथ एक पैरेंट डिव और आंतरिक सामग्री के साथ एक चाइल्ड डिवॉन डिव का उपयोग किया।

https://codepen.io/yuyazz/pen/BaoqBBq