द्रव चौड़ाई स्थिर स्थिति

Question

कल्पना कीजिए:

<div class="outer"> 
    <div class="inner"> 
    </div> 
</div> 

कहाँ:

• .outer एक स्तंभ संरचना का हिस्सा है, और इसकी चौड़ाई एक प्रतिशतक और इसलिए तरल पदार्थ है।
• .innerfixed स्थिति तत्व का प्रतिनिधित्व करता है जो 100% चौड़ाई .outer तत्व से भरना चाहिए। हालांकि इसकी स्थिति लंबवत वही है, इसलिए fixed।

  .outer { 
      position: relative; 
      width: %; 
  } 
  .inner { 
      position: fixed; 
      width: 100%; 
  } 
  

  हालांकि, .inner अपने relative माता पिता के प्रतिशत के रूप इसकी चौड़ाई की गणना नहीं करता है:

मैं निम्नलिखित सीएसएस के साथ इस लेआउट को लागू करने की कोशिश की है। इसके बजाय यह खिड़की/दस्तावेज़ की पूरी चौड़ाई भरता है। किसी भी left या right गुणों का प्रयास करने से परिणामस्वरूप माता-पिता को अनदेखा कर दिया जा सकता है।

क्या इसके आसपास कोई रास्ता है?

Answer 1

आप इस jsfiddle पर एक नज़र डाल सकते हैं जिसे मैंने आपकी समस्या के लिए ठीक किया है, आप इस कोड का उपयोग उसी तरह कर सकते हैं जैसा आप चाहते हैं।

Answer 2

position: fixed हमेशा विंडो/ब्राउज़र से संबंधित है, इस प्रकार इसका उपयोग आपकी समस्या को हल करने के लिए नहीं किया जा सकता है। फिक्स्ड पोजीशनिंग डीओएम के प्राकृतिक क्रम से तत्व को हटा देती है, और इस प्रकार आपके बाहरी div के भीतर नहीं रहती है, इसलिए यह ब्राउज़र की पूरी चौड़ाई क्यों लेता है, न कि आपके कंटेनर के। .outer के सापेक्ष .inner रखने के लिए आपको position: absolute का उपयोग करने की आवश्यकता है। आप अपने तत्व को स्थिति में रखने में सक्षम होंगे और साथ ही इसकी चौड़ाई .outer div द्वारा निहित हो जाएगी।

Answer 3

position:fixed हमेशा पूर्वजों के लिए व्यूपोर्ट/ब्राउज़र विंडो के सापेक्ष है।

Answer 4

इस fiddle जैसे कुछ का उपयोग करने के बारे में क्या?

.outer { 
    width: 20%; 
    height: 1200px; 
    margin-left: 5%; 
    float: left; 
} 
.inner { 
    height: 200px; 
    position: fixed; 
    top: 0; 
    background: orange; 
    right: 75%; 
    left: 5%; 
} 

Answer 5

.outer { 
    position: relative; 
    width: %; 
} 
.inner { 
    position: fixed; 
    width: inherit; 
} 

कि चाल करना चाहिए।

Answer 6

उपयोग करें:

.inner { स्थिति: तय; बाएं: 0; दाएं: 0;

}

Answer 7

फिक्स्ड तत्व केवल चौड़ाई के रूप में पूर्ण मूल्य लेते हैं। यदि आपका मूल कंटेनर द्रव है (चौड़ाई एक प्रतिशत है), तो आपको गतिशील रूप से निश्चित तत्व की चौड़ाई निर्धारित करने की आवश्यकता है। आपको रैपिंग कंटेनर की चौड़ाई प्राप्त करने और चिपचिपा तत्व पर सेट करने की आवश्यकता है।

सीएसएस

.outer {width: 25%;} 
.inner {position: fixed;} 

जे एस

var fixedWidth = $('.outer').css('width'); 
$('.inner').css('width', fixedWidth); 

साथ ही, आपको एक घटना श्रोता मामले खिड़की का आकार बदलता में जोड़ सकते हैं।

जे एस

window.addEventListener('resize', resize); 
function resize() { 
    var fixedWidth = $('.outer').css('width'); 
    $('.inner').css('width', fixedWidth); 
}