Dynamicznie zmienić wysokość div na rodzica

Question

Jak mogę osiągnąć, że niebieskie pudełko wypełnia pozostałe miejsce div i dynamicznie zmniejsza jego wysokość, gdy zielona skrzynia staje się większa?

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

Dziękuję bardzo!

Answer 1

Niestety, nie da się tego osiągnąć za pomocą CSS. Jednak slideToggle ma zwrotnego, którego można użyć do zmiany rozmiaru rzeczy, jak postępuje

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

aw JSFiddle

Jedyną rzeczą jest brzydki marginesy. Prawdopodobnie możliwe jest również znalezienie tych programów.

Jest to jedyny sposób na to, że pozwala na płynne skalowanie niebieskim polu

Answer 2

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

użyłem wysokość #left div jako wartość 100%.

Innym sposobem jest użycie overflow:hidden do zawijania div.

Rozwiązanie zależy od Twojego przypadku użycia.

Answer 3

jak o tym:

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

skrzypce pracy tutaj: http://jsfiddle.net/ncrqb/15/

Mam nadzieję, że to pomaga.

Answer 4

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

Oto fiddle

Answer 5

następujący kod rozwiąże ten problem: -

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

Oto rozwiązanie, i to działa.

Wszystkie te odpowiedzi są prawidłowe, ale po prostu zapomniały, że trzeba zmienić rozmiar niebieskiego pola po zakończeniu animacji, w przeciwnym razie jQuery zwróci poprzednią wysokość stanu slajdu.

A to dlatego, że jQuery animuje się przy użyciu window.setTimeout(); i dlatego nie blokuje kodu, tylko animacja jest wykonywana.