Dynamically change div's height to parent

Question

How can I achieve, that the blue box fills the div's remaining place and dynamically decreases his height when the green box gets bigger?

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, there's no way you can accomplish this with CSS. However, the slideToggle does have a callback that you can use to resize things as it progresses

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

And in JSFiddle

The only ugly thing there is the margins. It's probably possible to find those programatically as well, though.

This is the only way to do it that allows for smooth resizing of the blue box