मूल कंटेनर की 100% चौड़ाई के लिए एक निश्चित div सेट करें

Question 1

मेरे पास कुछ गद्दी के साथ एक आवरण है, मेरे पास एक प्रतिशत (40%) चौड़ाई के साथ एक अस्थायी रिश्तेदार डिव है।

फ्लोटिंग रिलेटिव डिव के अंदर मेरे पास एक निश्चित डिव है जिसे मैं उसके माता-पिता के समान आकार देना चाहूंगा। मैं समझता हूं कि दस्तावेज़ के प्रवाह से एक निश्चित div हटा दिया जाता है और जैसे कि आवरण के पैडिंग को अनदेखा कर रहा है।

एचटीएमएल

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

सीएसएस

body { 
  height: 20000px 
}  
#wrapper {
  padding: 10%;
}  
#wrap { 
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
} 
#fixed { 
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;
}

यहाँ अनिवार्य पहेली है: http://jsfiddle.net/C93mk/489/

क्या किसी को यह पूरा करने का एक तरीका पता है?

मैंने जिस उपलब्धि को हासिल करने की कोशिश की है, उस पर अधिक विस्तार दिखाने के लिए मैंने फिडेल में संशोधन किया है, इस भ्रम के लिए खेद है: http://jsfiddle.net/EVYRE/4/

Question 2

आप .wrapper के लिए गद्दी के बजाय .wrap कंटेनर के लिए मार्जिन का उपयोग कर सकते हैं:

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle

Question 3

इस बारे में कैसे ?

$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});

Jquery का उपयोग करके आप किसी भी प्रकार की चौड़ाई सेट कर सकते हैं :)

संपादित करें: जैसा कि टिप्पणियों में सपने द्वारा कहा गया है, इस प्रभाव के लिए सिर्फ JQuery का उपयोग व्यर्थ है और यहां तक कि काउंटर उत्पादक भी है। मैंने उन लोगों के लिए यह उदाहरण बनाया है जो अपने पृष्ठों पर अन्य सामान के लिए JQuery का उपयोग करते हैं और इस भाग के लिए भी इसका उपयोग करने पर विचार करते हैं। मेरे द्वारा किए गए किसी भी असुविधा के लिए मैं माफी माँगता हूँ।

Question 4

माता-पिता में एक परिवर्तन जोड़ने की कोशिश करें (कुछ भी करने की ज़रूरत नहीं है, एक शून्य अनुवाद हो सकता है) और निर्धारित बच्चे की चौड़ाई 100% पर सेट करें

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);
}
#fixed{ 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;
}

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

स्निपेट का विस्तार करें

Question 5

पैरेंट डिव के बेस में फूटर को पिन करने के लिए आप पोजिशनिंग का उपयोग कर सकते हैं। मैंने रैप करने के लिए 10px पैडिंग-बॉटम भी जोड़ा है (पाद की ऊंचाई से मेल खाता)। पूर्ण स्थिति प्रवाह के बाहर के बजाय पैरेंट डिव के सापेक्ष है क्योंकि आपने पहले ही इसे स्थिति सापेक्ष विशेषता दे दी है।

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    padding-bottom: 10px;
    position: relative;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:absolute;
    width:100%;
    left: 0;
    bottom: 0;
    padding:0px;
    height:10px;
    background-color:#333;

}

http://jsfiddle.net/C93mk/497/

Question 6

आदमी आपका कंटेनर मूल तत्व की चौड़ाई का 40% है

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

के बारे में सोच, मुझे एहसास हुआ कि आपके मूल तत्व में 10% पैडिंग (बाएं और दाएं) हैं, इसका मतलब है कि आपके तत्व में कुल पृष्ठ चौड़ाई का 80% है। इसलिए आपके तय तत्व का कुल चौड़ाई के 80% के आधार पर 40% होना चाहिए

तो आपको बस अपनी # क्लास को बदलने की जरूरत है

#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}

यदि आप sass, postcss या किसी अन्य css संकलक का उपयोग करते हैं, तो जब आप मूल तत्व के पैडिंग मान को बदलते हैं तो आप लेआउट को तोड़ने से बचने के लिए चर का उपयोग कर सकते हैं।

यहाँ अपडेटेड फिडेल है http://jsfiddle.net/C93mk/2343/

मुझे आशा है कि यह मदद करता है, का संबंध है

Question 7

अपने अंतिम jsfiddle के शीर्ष पर , आप बस एक चीज से चूक गए:

#sidebar_wrap {
  width:40%;
  height:200px;
  background:green;
  float:right;
}
#sidebar {
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/
}

लेकिन, इससे आपकी समस्या का समाधान कैसे होगा? सरल, यह समझाने की सुविधा देता है कि पहले की अपेक्षा बड़ा क्यों है।

फिक्स्ड एलिमेंट #sidebarविंडो के आकार को आधार के रूप में उपयोग करेगा, अपने स्वयं के आकार को पाने के लिए, हर दूसरे निश्चित तत्व की तरह, एक बार इस तत्व को परिभाषित करने width:inheritऔर #sidebar_wrapचौड़ाई में मूल्य के रूप में 40% होने के बाद, फिर गणना करेगा window.width * 40%, तब जब आपकी विंडो की चौड़ाई आपके से बड़ी हो .containerचौड़ाई, #sidebarसे बड़ा होगा #sidebar_wrap।

यह तरीका है, #sidebar_wrapइससे बड़ा होने से रोकने के लिए, आपको अपनी अधिकतम चौड़ाई निर्धारित करनी चाहिए #sidebar_wrap।

इस jsfiddle की जाँच करें जो एक कामकाजी कोड दिखाता है और बेहतर तरीके से समझाता है कि यह कैसे काम करता है।

Question 8

निकालें Padding: 10%;या का उपयोग पिक्सल के बजाय प्रतिशत के लिए.wrap

उदाहरण देखें: http://jsfiddle.net/C93mk/493/

HTML:

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

सीएसएस:

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 200px; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px;
    height:10px;
    background-color:#333;

}