Css में बिना ऊँचाई के सेट के साथ div की ऊँचाई प्राप्त करें

Question

क्या किसी तत्व की ऊंचाई प्राप्त करने का कोई तरीका है यदि तत्व के लिए कोई सीएसएस ऊंचाई नियम निर्धारित नहीं है जो मैं .height()jQuery विधि का उपयोग नहीं कर सकता क्योंकि इसे पहले सीएसएस नियम की आवश्यकता है? क्या ऊंचाई पाने का कोई और तरीका है?

Comments

क्या आपको लगता height()है कि एक सीएसएस नियम की आवश्यकता है?

— जेम्स मॉन्टेन

height()तत्वों की गणना की ऊँचाई प्राप्त करेंगे ...

— 22

ऐसा लगता है कि आप किसी छिपे हुए तत्व के अंदर कुछ ऊंचाई पाने की कोशिश कर रहे हैं? या तत्व ही छिपा है। कोई नहीं कर सकता!

— charlietfl

अपना कोड शामिल करें क्योंकि heightcss सेट के लिए कोई आवश्यकता नहीं है । उस लिंक का jquery से कोई लेना-देना नहीं है।

— जेम्स मोंटेने

कि "अंतर्दृष्टि" लिंक 7 साल पुराना है!

— charlietfl

Answer 1

jQuery .heightआपको तत्व की ऊंचाई वापस कर देगा। यह सीएसएस परिभाषा की जरूरत नहीं है क्योंकि यह गणना की ऊंचाई निर्धारित करता है।

डेमो

आप का उपयोग कर सकते हैं .height(), .innerHeight()या outerHeight()आप की जरूरत पर आधारित है।

.height() - तत्व की ऊंचाई पैडिंग, बॉर्डर और मार्जिन को छोड़कर।

.innerHeight() - तत्व की ऊंचाई रिटर्न में पैडिंग शामिल है लेकिन सीमा और मार्जिन को छोड़कर।

.outerHeight() - सीमा सहित div की ऊंचाई लौटाता है लेकिन मार्जिन को छोड़कर।

.outerHeight(true) - मार्जिन सहित div की ऊंचाई लौटाता है।

लाइव डेमो के लिए कोड स्निपेट के नीचे देखें। :)

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')
});

div { font-size: 0.9em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="heightTest" style="height: 150px; padding: 10px; margin: 10px; border: 2px solid blue; overflow: hidden; ">
</div>

Answer 2

बस एक नोट के मामले में दूसरों को एक ही समस्या है।

मुझे एक ही समस्या थी और एक अलग उत्तर मिला। मैंने पाया कि एक div की ऊँचाई जो उसकी ऊँचाई निर्धारित है, उसकी सामग्री को window.load पर आरंभ करने की आवश्यकता है , या window.scroll नहीं दस्तावेज़। पहले से ही अन्यथा मुझे विषम हाइट्स / छोटी हाइट मिलती हैं, अर्थात इससे पहले कि चित्र लोड किए गए हैं। मैंने आउटरहाइट () का भी इस्तेमाल किया ।

var currentHeight = 0;
$(window).load(function() {
    //get the natural page height -set it in variable above.

    currentHeight = $('#js_content_container').outerHeight();

    console.log("set current height on load = " + currentHeight)
    console.log("content height function (should be 374)  = " + contentHeight());   

});

Comments

संभवतः आप विषम ऊँचाइयाँ प्राप्त कर रहे हैं क्योंकि अधिक निर्देश हैं जो आपके द्वारा उपयोग / मुद्रित करने के बाद ऊँचाई को बदलते हैं। यह आपकी स्क्रिप्ट के अंत में ऊंचाइयों के लिए पूछने की सिफारिश की जाती है

— Gjaa

Answer 3

इसे jQuery में कर सकते हैं । सभी विकल्पों का प्रयास करें .height(), .innerHeight()या .outerHeight()।

$('document').ready(function() {
    $('#right_div').css({'height': $('#left_div').innerHeight()});
});

उदाहरण स्क्रीनशॉट

उम्मीद है की यह मदद करेगा। धन्यवाद!!

Answer 4

यह भी सुनिश्चित करें कि वर्तमान में div को DOM से जोड़ा जा रहा है और दृश्यमान है ।

Comments

कृपया ध्यान दें कि यह उत्तर के रूप में टिप्पणी के रूप में मुझे अधिक अनुकूल लग सकता है।

— कुकुइला

उन्होंने टिप्पणी विशेषाधिकारों, आराम लोगों को नहीं किया होगा।

— स्टैकऑवरफ्लो

मैं इसे एक महत्वपूर्ण जानकारी मानता हूं, क्योंकि तत्व के साथ शुरू करने के लिए तत्व संलग्न नहीं होने पर अन्य उत्तरों में से कोई भी काम नहीं करेगा।

— गुइडो