अधिकतम माता-पिता के साथ अपने माता-पिता के सापेक्ष निश्चित स्थित डिवीजन की चौड़ाई सेट करें

Question

क्या जेएस के बिना कोई समाधान है?

एचटीएमएल

<div class="wrapper"> 
    <div class="fix"></div> 
</div> 

सीएसएस

.wrapper { 
max-width: 500px; 
border: 1px solid red; 
height: 5500px; 
position: relative; 
} 


.fix { 
width: inherit; 
height: 20px; 
position:fixed; 
background: black; 
} 

मैं नहीं कर सकते width: 100%; छोड़कर .wrapper के लिए किसी भी अन्य शैलियों जोड़ें। मैं width: inherit के साथ प्रयास करता हूं लेकिन यह मेरे लिए काम नहीं करता है क्योंकि मेरे पास केवल अधिकतम चौड़ाई वाला पैरेंट div है। source

यहाँ JsFiddle Demo

Answer 1

एक position:fixed तत्व अब और इसके जनक के सापेक्ष नहीं है। यह केवल व्यूपोर्ट की बौद्धों का सम्मान करता है।

MDN Definition:

तय
तत्व के लिए खाली स्थान न छोड़ें। इसके बजाए, स्क्रीन के व्यूपोर्ट के सापेक्ष एक निर्दिष्ट स्थिति पर रखें और स्क्रॉल करते समय इसे स्थानांतरित न करें।

इसलिए किसी भी width, max-width, या जो कुछ भी संपत्ति निश्चित तत्व द्वारा सम्मानित नहीं किया जाएगा।

संपादित

वास्तव में, यह width कोई width संपत्ति आवरण पर परिभाषित नहीं है क्योंकि प्राप्त कर लेंगे नहीं .. तो, width: 100% के रूप में बच्चे को सेट करने का प्रयास और max-width वारिस:

http://jsfiddle.net/mx6anLuu/2/

.wrapper { 
    max-width: 500px; 
    border: 1px solid red; 
    height: 5500px; 
    position: relative; 
} 


.fix { 
    max-width: inherit; 
    width: 100%; 
    height: 20px; 
    position:fixed; 
    background: black; 
} 

Answer 2

कॉलम पर पहले से ही चौड़ाई है, बस निश्चित तत्व की चौड़ाई को उत्तराधिकारी के लिए सेट करें। चीजों को जटिल करने का कोई कारण नहीं है।

सीएसएस:

.col-sm-3 { width: 25%; } 
.fixed-in-col { width: inherit; ... } 

HTML:

<div class="col-sm-3"> 
    <div class="fixed-in-div"> 
     ... 
    </div> 
</div> 

Answer 3

ऐसा लगता है वहाँ जे एस के बिना कोई समाधान नहीं है। इस ब्लॉग पोस्ट फेलिप Tadeo से बताता है कि क्यों:

https://dev.to/phillt/inherit-the-width-of-the-parent-element-when-position-fixed-is-applied

यह width: inherit

"फिक्स्ड पदों के आसपास भ्रम ही व्यूपोर्ट के सापेक्ष बताते हैं ... जब भी आप चौड़ाई वारिस (स्थिति ठीक किए जाने के) यह व्यूपोर्ट के संबंध में होगा "