गतिशील रूप से div की ऊंचाई को पैरेंट

Question

पर कैसे बदलें, मैं कैसे प्राप्त कर सकता हूं, कि नीला बॉक्स div की शेष जगह भरता है और हरे रंग का बॉक्स बड़ा होने पर गतिशील रूप से उसकी ऊंचाई कम कर देता है?

http://jsfiddle.net/trek711/ncrqb/4/

एचटीएमएल

<div id="wrap"> 
    <div id="left"></div> 
    <div id="righttop"> 
     <div id="click">Click!</div> 
     <div id="box"></div> 
     <div id="place"></div> 
    </div> 
    <div id="rightbot"></div> 
</div> 

सीएसएस

#wrap { 
    padding: 5px; 
    width: 700px; 
    height: 500px; 
    background-color: yellow; 
    border: 1px solid black; 
} 
#left { 
    float: left; 
    margin: 0 5px 0 0; 
    width: 395px; 
    height: inherit; 
    background-color: red; 
} 
#righttop { 
    float: left; 
    padding: 5px; 
    width: 290px; 
    background-color: green; 
} 
#rightbot { 
    float: left; 
    margin: 5px 0 0 0; 
    width: 300px; 
    height: 60%; 
    background-color: blue; 
} 
#click { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
} 
#box { 
    display: none; 
    width: 200px; 
    height: 100px; 
    background-color: white; 
} 
#place { 
    width: 100px; 
    height: 120px; 
    background-color: lightgrey; 
} 

जे एस

$("#click").on("click", function (e) { 
    $("#box").slideToggle("fast"); 
}); 

बहुत बहुत धन्यवाद!

Answer 1

दुर्भाग्य से, आप इसे सीएसएस के साथ पूरा करने का कोई तरीका नहीं है। हालांकि, slideToggle एक कॉलबैक कि आप चीजों को आकार बदलने के लिए के रूप में यह प्रगति

$("#box").slideToggle(
     { duration: "fast", 
     progress: function() { 
      $('#rightbot').height(
       $('#wrap').height() 
       - $('#righttop').height() 
       - 15 /* margins */) 
     } 
    }); 

और JSFiddle

केवल बदसूरत बात नहीं है मार्जिन में उपयोग कर सकते हैं करता है। हालांकि, प्रोग्रामिंग के साथ-साथ यह संभवतः खोजना संभव है।

यह यह करने के लिए एक ही रास्ता है कि नीले बॉक्स

Answer 2

$("#click").on("click", function (e) { 
    $("#box").slideToggle("fast"); 
    $("#rightbot").height($("#left").height() - $("#rightbot").height()); 
}); 

मैं 100% मूल्य के रूप में #left div की ऊंचाई इस्तेमाल किया की चिकनी आकार बदलने के लिए अनुमति देता है।

अन्य तरीके से divping wrap के लिए overflow:hidden का उपयोग करना है।

समाधान आपके उपयोग के मामले पर निर्भर करता है।

Answer 3

कैसे उस के बारे में:

$("#click").on("click", function (e) { 
    var height = "63%", 
     $box = $("#box"), 
     $blueBox = $("#rightbot"); 

    if($box.is(":visible")){   
     $box.hide("fast"); 
     $blueBox.height(height); 
     return; 
    } 

    height = "43%"; 
    $box.show("fast"); 
    $blueBox.height(height); 
}); 

काम कर बेला यहाँ: http://jsfiddle.net/ncrqb/15/

मुझे आशा है कि यह मदद करता है।

Answer 4

$("#click").on("click", function (e) { 
    $("#box").slideToggle("fast"); 
    if($("#rightbot").height()==300) 
     $("#rightbot").height("43%"); 
    else 
     $("#rightbot").height("300"); 
}); 

यहाँ fiddle

Answer 5

के बाद कोड मुद्दे को हल करेंगे: -

$("#click").on("click", function (e) { 
     $("#box").slideToggle("fast",function(){ 
      var bluedivHeight = 300;//$("#rightbot").height() if want to have dynamic  
      var toggleBoxHeight = $("#box").height(); 
      if($("#box").css("display")==="block"){ 
       $("#rightbot").height(bluedivHeight-toggleBoxHeight); 
      } else { 
       $("#rightbot").height(bluedivHeight); 
      } 
     }); 
    }); 

Answer 6

http://jsfiddle.net/ncrqb/21/

function centerBlue(){ 
     var blue = $("#rightbot"); 
     var parent = $("#left"); 
     var rightTop = $("#righttop"); 
     var left_space = (parent.outerHeight() - rightTop.outerHeight()) - 5; 
     blue.css("height",left_space+"px"); 
     console.log(rightTop.outerHeight()); 
    } 

यहाँ समाधान है, और यह काम करता है।

ये सभी उत्तर सही हैं, लेकिन वे भूल गए हैं कि एनीमेशन के बाद आपको ब्लू बॉक्स को फिर से आकार देने की आवश्यकता है, अन्यथा jQuery स्लाइड स्थिति की पिछली ऊंचाई वापस कर देगा।

और ऐसा इसलिए है क्योंकि, jQuery window.setTimeout() का उपयोग करके एनिमेट करता है; और यही कारण है कि यह कोड को अवरुद्ध नहीं करता है, केवल एनीमेशन ही किया जाता है।