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!

Related that you might find useful: [Make a div fill the remaining screen space](http://stackoverflow.com/a/90886/425809) — Richard, Aug 16 '13 at 11:56
You could explore the flex-box definition: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ - More specifically the stretch part of it — cowcowmoomoo, Aug 16 '13 at 12:02
You'll need javascript. Get the height of the blue box by substracting the height of the container to the green box. Then onclick should update the height of the blue box according to the new size of the green box. — Frisbetarian-Support Palestine, Aug 16 '13 at 12:04

Richard · Accepted Answer · 2013-08-16T12:07:19.243

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

score 0 · Answer 2 · answered Aug 16 '13 at 12:04

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

I used #left div's height as 100% value.

Other way is to use overflow:hidden for wrapping div.

Solution depends on your use case.

score 0 · Answer 3 · answered Aug 16 '13 at 12:05

how about that:

  $("#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/

I hope it helps.

score 0 · Answer 4 · answered Aug 16 '13 at 12:07

0

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

Here is fiddle

answered Aug 16 '13 at 12:07

Prabhakaran Parthipan

4,193
2
18
27

score 0 · Answer 5 · answered Aug 16 '13 at 12:09

Following code will solve the issue :-

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

score 0 · Answer 6 · answered Aug 16 '13 at 12:10

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 of those answers are right, but they just forgot that you need to re-size the blue box after the animation is done, otherwise jQuery will return the previous height of the slide state.

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

Dynamically change div's height to parent

6 Answers6