[Jquery] प्रतिशत की ऊंचाई क्यों मेरे div पर काम नहीं कर रही है?


Answers

सीएसएस height संपत्ति और प्रतिशत मानों के साथ कार्य करना

सीएसएस height संपत्ति, जब एक प्रतिशत मूल्य के साथ प्रयोग किया जाता है, तो तत्व के युक्त ब्लॉक के संबंध में गणना की जाती है।

मान लें कि आपके body तत्व की height: 1000px तब height: 90% वाला बच्चा height: 90% 900 पिक्स होगा

यदि आपने उस ब्लॉक को स्पष्ट ऊंचाई सेट नहीं किया है (और बच्चा पूरी तरह से तैनात नहीं है), तो आपके बच्चे की प्रतिशतता ऊँचाई के साथ कुछ भी नहीं होनी चाहिए और ऊँचाई सामग्री और अन्य गुणों के द्वारा निर्धारित की जाएगी।

कल्पना से:

10.5 सामग्री ऊंचाई: height संपत्ति

प्रतिशत
प्रतिशत ऊंचाई निर्दिष्ट करता है प्रतिशत की गणना जनरेट बॉक्स के ब्लॉक वाले ऊंचाई के संबंध में की जाती है। यदि ब्लॉक की ऊंचाई स्पष्ट रूप से निर्दिष्ट नहीं है और यह तत्व पूरी तरह से तैनात नहीं है, मान 'ऑटो' के लिए गणना करता है

ऑटो
ऊंचाई अन्य गुणों के मूल्यों पर निर्भर करती है।

इसलिए, यदि आप अपने divs में प्रतिशत ऊंचा का उपयोग करना चाहते हैं, तो मूल तत्व तत्व (जैसे, html, body {height:100%;} ) सहित सभी मूल तत्वों की ऊंचाई निर्दिष्ट करें

ध्यान दें कि min-height और max-height स्वीकार्य नहीं हैं। यह height संपत्ति होना चाहिए

यहाँ एक संक्षिप्त सारांश है:

जॉन: मैं अपने डिवा की ऊंचाई 100% तक सेट करना चाहता हूं
जेन: 100% क्या?
जॉन: अपने कंटेनर का 100% इसलिए, माता-पिता के एक-स्तर ऊपर
जेन: ठीक है। और डिवि के अभिभावक की ऊंचाई क्या है?
जॉन: एक नहीं है ऑटो, मुझे लगता है सामग्री पर ही आधारित।
जेन: तो, आप चाहते हैं कि div को अज्ञात चर की 100% ऊँचाई हो।
जॉन: [मौन]
जेन: हे जॉन, क्या मैं इसमें 50% कर सकता हूं?
जॉन: 50% क्या?
जेन: बिल्कुल!
जेन: प्रतिशत सापेक्ष मान हैं आपको हमेशा "क्या का प्रतिशत?" पूछना है प्रत्येक माता पिता के body और html तक हर तरफ के लिए एक स्पष्ट ऊंचाई घोषित करके आप ऊंचाई के साथ प्रत्येक बच्चे के लिए संदर्भ की एक सीमा निर्धारित करते हैं, जिससे काम करने के लिए ऊँचाई को सक्षम किया जा सकता है।

उदाहरण

मान लीजिए आप चाहते हैं कि डिव को अपने माता-पिता की 50% ऊंचाई चाहिए।

यह काम नहीं करेगा:

<article>
    <section>
        <div style="height:50%"></div>
    </section>
</article>

यह भी नहीं होगा:

<article>
    <section style="height:100%">
        <div style="height:50%"></div>
    </section>
</article>

और न ही यह होगा:

<article style="height:100%">
    <section style="height:100%">
        <div style="height:50%"></div>
    </section>
</article>

यह भी विफल हो जाएगा:

<body style="height:100%">
    <article style="height:100%">
        <section style="height:100%">
            <div style="height:50%"></div>
        </section>
    </article>
</body>

अब, यह अंततः काम करेगा:

<html style="height:100%">
    <body style="height:100%">
        <article style="height:100%">
            <section style="height:100%">
                <div style="height:50%"></div>
            </section>
        </article>
    </body>
 </html>

और यह, साथ ही काम करेगा:

<article>
    <section style="height: 500px">
        <div style="height:50%"></div>
    </section>
</article>

लेकिन यह नहीं:

<article>
    <section style="min-height: 500px">
        <div style="height:50%"></div>
    </section>
</article>

नमूना कोड

जैसा कि युक्ति में बताया गया है , एक बिल्कुल तैनात तत्व नियम को अपवाद है यहां अधिक विवरण: नेस्टेड, नॉन-फ्लेक्स तत्वों के लिए 100% ऊंचाई को लागू करना ।

Question

इस सवाल का पहले से ही एक उत्तर है:

मेरे पास 90% की ऊंचाई वाली दो डिवा है, लेकिन डिस्प्ले अलग है।

मैंने एक बाहरी डिवा डाल दिया है लेकिन उसने मदद नहीं की है। साथ ही, यह एफएफ, क्रोम, ओपेरा और सफारी पर भी है।

क्या कोई यह समझा सकता है कि मुझे इस समस्या क्यों है?

नीचे मेरा कोड है:

<div style="height: 90%">
    <div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
        <tabset>
            <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
               disabled="tabs[0].disabled">
            </tab>


            <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                 disabled="tabs[2].disabled">
            </tab>
        </tabset>
    </div>

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
    </div>
    </div>