पैरेंट div के सापेक्ष div की प्रतिशत चौड़ाई कैसे बनाएं और व्यूपोर्ट

Question

Here is the HTML I am working with देखें।

<div id="outer" style="min-width: 2000px; min-height: 1000px; background: #3e3e3e;"> 
 
    <div id="inner" style="left: 1%; top: 45px; width: 50%; height: auto; position: absolute; z-index: 1;"> 
 
    <div style="background: #efffef; position: absolute; height: 400px; right: 0px; left: 0px;"></div> 
 
    </div> 
 
</div>

भीतरी div अपनी मूल div (बाह्य) को दिए गए स्थान का 50% पर कब्जा करने के लिए क्या मैं ऐसा करना चाहते हैं। इसके बजाय, व्यूपोर्ट में उपलब्ध 50% स्थान प्राप्त हो रहा है, जिसका अर्थ है कि ब्राउज़र/व्यूपोर्ट आकार में घटता है, तो यह भी करता है।

यह देखते हुए कि बाहरी div 2000px है, मैं अपेक्षा करता हूं कि आंतरिक div कम से कम 1000px चौड़ा हो।

Answer 1

एक गैर स्थिर स्थिति, जैसे, एक नोड पर position: absolute/relative निर्दिष्ट मतलब है कि यह के भीतर यह http://jsfiddle.net/E5eEk/1/

#outer { 
 
    min-width: 2000px; 
 
    min-height: 1000px; 
 
    background: #3e3e3e; 
 
    position:relative 
 
} 
 

 
#inner { 
 
    left: 1%; 
 
    top: 45px; 
 
    width: 50%; 
 
    height: auto; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
#inner-inner { 
 
    background: #efffef; 
 
    position: absolute; 
 
    height: 400px; 
 
    right: 0px; 
 
    left: 0px; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    <div id="inner-inner"></div> 
 
    </div> 
 
</div>

Answer 2

स्थिति का उपयोग करें: मूल तत्व पर सापेक्ष।

यह भी ध्यान दें कि आपने किसी भी divs में कोई भी स्थिति विशेषता नहीं जोड़ा है जिसे आपने इस व्यवहार को नहीं देखा होगा। जुआन आगे बताते हैं।