CJS EFC resizable height

Panel w/ resizable height and fluid height sidebar.

by meatHucker

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css">
<div class="container">
    <div class="row space">
        <div class="col-md-12">
            <div id="pane" class="panel panel-default panel-resizable">
                <div class="panel-heading">
                    	<h3 class="panel-title">Electronic Filling Cabet</h3>

                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-2">
                            <div class="sidebar">this is a well</div>
                        </div>
                        <div class="col-sm-2">
                            <div class="tabs">asfasd</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row space">
        <div class="col-md-12">
            <div id="pane2" class="panel panel-default panel-resizable">
                <div class="panel-heading">
                    	<h3 class="panel-title">Electronic Filling Cabet</h3>

                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-2">
                            <div class="sidebar">this is a well</div>
                        </div>
                        <div class="col-sm-2">
                            <div class="tabs">asfasd</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.space {
    margin-top:40px;
}
.ui-resizable-handle {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
}
.ui-resizable-n, .ui-resizable-s {
    left:50%;
}
.ui-resizable-e, .ui-resizable-w {
    top:50%;
}
.ui-resizable-se {
    right: -5px;
    bottom: -5px;
}
.sidebar {
    height: 100%;
    background: #cccccc;
    -webkit-transition: height .1s linear;
    -moz-transition: height .1s linear;
    -ms-transition: height .1s linear;
    -o-transition: height .1s linear;
    transition: height .1s linear;
}
.tabs, .sidebar {
    padding: 20px;
}
.panel-resizable .panel-body {
    padding: 0;
}

JavaScript

$(function () {
    $("#pane").resizable({
        handles: "s",
        minHeight: 175
    });

    $("#pane").on("resizestop", function (event, ui) {

        var thisH = ui.size.height,
            pH = $(this).find(".panel-heading").height() + 22,
            myH = thisH - pH;

        console.log(event, ui, thisH, pH, myH);

        $("#pane .sidebar").css("height", myH);
    });
});