स्थिति: निश्चित और चौड़ाई: प्रतिशत माता-पिता के साथ उत्तराधिकारी

Question

मैं निश्चित तत्व प्रतिशत पेरेंट के width (यहां #container) देने का प्रयास कर रहा हूं। जब मैं प्रतिशत के बजाय पिक्सेल का उपयोग करता हूं तो यह काम करता है। मैं यह कैसे कर सकता हूं? क्या यह सीएसएस के साथ संभव है?

एचटीएमएल

<div id="outer"> 
    <div id="container"> 
    <div id="fixed"> 
     Sitename 
    </div>    
    </div> 
</div> 

सीएसएस

#outer{ 
    width:300px; 
    border: 1px solid yellow; 
} 

#container { 
    width: 90%; /*When I use e.g 250 px it works. But I need it in percentage*/ 
    border: 1px solid red; 
    height: 300px; 
} 

#fixed { 
    position: fixed; 
    width: inherit; 
    border: 1px solid green; 
} 

JSFiddle

जोड़ें:

मुझे position:fixed की आवश्यकता है। क्योंकि मैं इस तरह पृष्ठ के तल पर यह जगह करना चाहते हैं: position:relativ साथ

JSFiddle

समाधान मेरे लिए काम नहीं करता।

Answer 1

"निश्चित" की चौड़ाई 100% तक सेट करें, और इसे एक स्थिति दें (तय करें) एक निश्चित स्थिति के बजाय सापेक्ष। कि ब्राउज़र के लिए अस्पष्ट है तय है, तो स्थिति का उपयोग करें:: http://jsfiddle.net/J7yE4/

#fixed { 
    position: relative; 
    width: 100%; 
    border: 1px solid green; 
} 

Answer 2

आप चौड़ाई के रूप में #outer है: 300px, 90% के रूप में #container मतलब है 270px, अब आप दे दिया है चौड़ाई: वारिस और स्थिति चौड़ाई के साथ तय हो गई : #fixed

Answer 3

के लिए x% ऐसा लगता है कि स्थिर मूल्य (250 पीएक्स) सामान्य विरासत के माध्यम से प्रचारित किया जा सकता है। जबकि जब सापेक्ष मूल्य (9 0%) का उपयोग किया जा रहा है, निश्चित div पहले से ही प्रवाह से बाहर ले जाया गया है, और अब विरासत के अनुसार, यह माता-पिता व्यूपोर्ट है। ऐसा लगता है कि आपको अच्छे पुराने जेएस का उपयोग करना होगा।

लेकिन, यह सवाल अब महीने पुराना है, इसलिए शायद यह किसी भी तरह से कोई फर्क नहीं पड़ता।

Answer 4

एक धारणा है कि वंचित मूल्यों को सापेक्ष लोगों (जैसे प्रतिशत) से पूर्ण अनुवाद में 'अनुवादित' किया जाता है। अंदाज़ा लगाओ? यह गलत है। यहाँ MDN इसके बारे में क्या कहते हैं क्या है:

inherit सीएसएस-मूल्य तत्व है जिसके लिए वह को निर्दिष्ट किया जाता है अपनी मूल तत्व से संपत्ति का परिकलित मान लेने का कारण बनता है।

[...]

गणना संपत्ति आम तौर पर सापेक्ष मूल्यों परिवर्तित करना शामिल है के लिए परिकलित मान तक पहुँचने के लिए की जरूरतशुद्ध मान (जैसे em units या percentages में उन लोगों के रूप में)। उदाहरण के लिए, यदि किसी तत्व ने font-size: 16px और padding-top: 2em मान निर्दिष्ट किए हैं, तो पैडिंग-टॉप का गणना मूल्य 32px (फ़ॉन्ट आकार को दोगुना) है।

हालांकि, कुछ गुण (उन जहां प्रतिशत कुछ, इस तरह के width के रूप में है कि निर्धारित करने के लिए लेआउट की आवश्यकता हो सकती के सापेक्ष हैं, margin-right, text-indent, और top) के लिए, प्रतिशत निर्दिष्ट मानों प्रतिशत गणना की मूल्यों में बदल जाते हैं। [...] गणना किए गए मान में बने ये सापेक्ष मान पूर्ण हो जाते हैं जब उपयोग मूल्य निर्धारित होता है।

---

अब

एक उदाहरण। मान लीजिए कि हम निम्नलिखित संरचना करते हैं:

<div id="alpha"> 
    <div id="bravo"> 
    <div id="charlie"></div> 
    </div> 
</div> 

... और निम्नलिखित सीएसएस:

#alpha { outline: 1px solid red; width: 420px; height: 100px; } 
#bravo { outline: 1px solid green; width: 50%; height: inherit; margin: 0 auto; } 
#charlie { outline: 1px solid navy; width: inherit; height: inherit; margin: 0 auto; } 

... आप इस तस्वीर देखेंगे:

। .. जिसका अर्थ है कि #charlie तत्व की ऊंचाई #bravo अभिभावक के समान है, इसकी चौड़ाई इसके माता-पिता का 50% है। विरासत एक गणना मूल्य था: 100px ऊंचाई के लिए, 50% चौड़ाई के लिए।

---

इस सुविधा अच्छा है या बुरा हो सकती है, स्थिति के आधार पर, गैर निश्चित तत्वों के लिए, यह निश्चित रूप से तय हो गई लोगों को चोट पहुँचाने जा रहा है। 50%width संपत्ति के लिए मान के रूप में विरासत में मिला है, used value उस आयाम के लिए व्यूपोर्ट पर आधारित होगा। यह percentage-using मानों के साथ समान है, जैसे calc(50%)।