Dynamically change div height to parent

Question

How can I achieve that the blue box fills the remaining space of the div and dynamically reduces its height when the green square gets larger?

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

Thank you very much!

Answer 1

Unfortunately, you cannot do this with CSS. However, slideToggle has a callback that you can use to resize as you move.

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

And in JSFiddle

The only ugly thing is the fields. This is probably also possible to find programmatically.

This is the only way to do this, allowing a smooth resizing of the blue block.

Answer 2

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

I used #left div height as 100% value.

Another way is to use overflow:hidden to package the div.

The decision depends on your use case.

Answer 3

how about this:

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

working fiddle here: http://jsfiddle.net/ncrqb/15/

Hope this helps.

Answer 4

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

Here is the fiddle

Answer 5

The following code will solve the 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()); } 

Here is the solution, and it works.

All these answers are correct, but they just forgot that you need to resize the blue field after the animation is complete, otherwise jQuery will return the previous height of the slide state.

And this is because jQuery animates using window.setTimeout (); and why it does not block the code, only the animation is executed.