jQuery - गतिशील div ऊंचाई

Question

मैं पेजेलोड और विंडो आकार बदलने पर एक div का आकार बदलने का प्रयास कर रहा हूं। कोड बेलो </body> से पहले रखा गया है, और यह पेजेलोड पर ठीक काम करता है, लेकिन विंडो आकार बदलने पर कुछ भी नहीं करता है। मैंने एक चेतावनी के साथ आकार बदलने का काम किया, जो आकार बदलने पर ट्रिगर करता है, लेकिन ऊंचाई अपरिवर्तित बनी हुई है।

<script type='text/javascript'> 
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'}); 

    $(window).resize(function(){ 
     $('#main-content') .css({'height': (($(window).height()) - 361)+'px'}); 
     alert('resized'); 
    }); 
</script> 

---

अद्यतन: एक लंबे ब्रेक के बाद, मैं क्या समस्या का कारण है की खोज की है। मैं एक ही div पर एक स्टाइल स्क्रॉलबार जोड़ने के लिए एक jquery स्क्रिप्ट का उपयोग कर रहा हूँ जिसका आकार बदल रहा है। जब मैं इसे टिप्पणी करता हूं, तो सबकुछ ठीक से बदलता है। मैंने उसी फ़ंक्शन में स्क्रॉलबार प्रारंभिक रूप को आकार बदलने के रूप में स्थानांतरित कर दिया है, और किसी भी भिन्नता की कोशिश की है जिसे मैं सोच सकता हूं .. अभी भी इसे काम पर नहीं लाया जा सकता है।

(.scroll फलक # मुख्य सामग्री div भी वर्ग)

<script type='text/javascript'> 
$(function(){ 
    $('#main-content').css({'height':(($(window).height())-361)+'px'}); 
    $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15}); 

    $(window).resize(function(){ 
      $('#main-content').css({'height':(($(window).height())-361)+'px'}); 
    }); 
}); 
</script> 

Answer 1

इसे हल किया!

ऊंचाई की गणना करने से पहले जेएसक्रोलपैन को हटाने की आवश्यकता थी, और इसे फिर से लागू करना था।

<script type='text/javascript'> 
$(function(){ 
    $('.scroll-pane').css({'height':(($(window).height())-361)+'px'}); 
    $('#main-content').jScrollPane({scrollbarWidth:15, scrollbarMargin:15}); 

    $(window).resize(function(){ 
      $('.scroll-pane').jScrollPaneRemove(); 
      $('#main-content').css({'height':(($(window).height())-361)+'px'}); 
      $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15}); 
    }); 
}); 
</script> 

Answer 2

ध्यान दें कि विंडो आकार परिवर्तन समारोह के बाद ही खिड़की आकार दिया जा चुका है एक बार आग,। यह आकार बदलने के दौरान अद्यतन नहीं होता है, इसलिए यदि आप विंडो सीमा को खींचने के लिए खींच रहे हैं, तो माउस बटन को छोड़ने से पहले कोई बदलाव नहीं होगा।

इसके अलावा, आप $(document).ready() भीतर ऐसा करते हैं, इस तरह सुनिश्चित करें:

<script type='text/javascript'> 
$(function() 
{ 
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'}); 

    $(window).resize(function(){ 
     $('#main-content') .css({'height': (($(window).height()) - 361)+'px'}); 
     alert('resized'); 
    }); 
}); 
</script> 

यहाँ एक working demo है।

Answer 3

फ़ंक्शन निष्पादित न करें जब तक दस्तावेज़ की ऊंचाई खिड़की की ऊंचाई से कम या बराबर न हो।

$(function() { 
    if($(document).height() <= $(window).height()) { 
    $('#wrapper').css({ 'height': ($(window).height()) }); 
    $(window).resize(function(){ 
     $('#wrapper').css({ 'height': ($(window).height()) }); 
    }); 
    } 
}); 

मुझे समस्याएं थीं जहां सामग्री div के बाहर बहती है।