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


Answers

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

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

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

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

कल्पना से:

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

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

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

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

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

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

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

उदाहरण

मान लें कि आप चाहते हैं कि एक div अपने माता-पिता की 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>

नमूना कोड

दो अतिरिक्त नोट्स:

  • जैसा कि आप देख सकते हैं, प्रतिशत ऊंचाई थोड़ा मुश्किल है। व्यूपोर्ट प्रतिशत ऊंचाई का उपयोग करके आप जटिलता से बच सकते हैं (यानी, कभी भी मूल तत्वों पर विचार नहीं करना चाहिए)। जब भी आप एक बॉक्स को व्यूपोर्ट की height: 100% height: 100vh चाहते हैं, ऊंचाई का उपयोग करें height: 100vh बजाय height: 100vh height: 100% । और कुछ भी जरूरी नहीं है।

  • जैसा कि स्पेक में उल्लेख किया गया है , एक पूरी तरह से स्थित तत्व प्रतिशत ऊंचाई के लिए नियम का अपवाद है। यहां अधिक जानकारी: नेस्टेड, गैर-फ्लेक्स तत्वों पर 100% ऊंचाई लागू करना ।

Question

इस प्रश्न का उत्तर यहां दिया गया है:

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

मैंने बाहरी div लगाने की कोशिश की है लेकिन इससे मदद नहीं मिली है। इसके अलावा, यह एफएफ, क्रोम, ओपेरा और सफारी पर भी वही है।

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

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

<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>



Links