Modifica dinamica dell'altezza del div al padre

Question

Come posso ottenere che la casella blu riempia il posto rimanente del div e diminuisca dinamicamente la sua altezza quando la scatola verde diventa più grande?

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

HTML

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

CSS

#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; 
} 

JS

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

Grazie mille!

Answer 1

Sfortunatamente, non c'è modo di farlo con i CSS. Tuttavia, lo slideToggle ha un callback che è possibile utilizzare per ridimensionare le cose come progredisce

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

E in JSFiddle

L'unica cosa brutta è ai margini. Probabilmente è possibile trovarli anche programmaticamente.

Questo è l'unico modo per farlo che permette di regolare il ridimensionamento del riquadro blu

Answer 2

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

ho usato altezza #left di div come valore di 100%.

L'altro modo è utilizzare overflow:hidden per avvolgere div.

La soluzione dipende dal caso d'uso.

Answer 3

come circa che:

$("#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); 
}); 

violino lavorare qui: http://jsfiddle.net/ncrqb/15/

spero che aiuta.

Answer 4

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

Ecco fiddle

Answer 5

Seguendo codice risolverà il problema: -

$("#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()); 
    } 

Ecco la soluzione, e funziona.

Tutte queste risposte sono corrette, ma hanno semplicemente dimenticato che è necessario ridimensionare la casella blu dopo che l'animazione è stata completata, altrimenti jQuery restituirà l'altezza precedente dello stato della diapositiva.

E questo perché, jQuery si anima usando window.setTimeout(); ed è per questo che non blocca il codice, solo l'animazione è fatta.