Resizeable div elements

sets a child div element to the same size as the parent. Scales on resize of parent

by Randy Crews

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css">
<div id="container">
    <div id="child" contenteditable="true">Click in here and type to enter new content</div>
</div>

CSS

#container {
    width: 200px;
    height: 50px;
    border: 1px solid red;
    padding:5px;
}
#child { 
    background-color: #ccc;
    border: 1px solid #000;
    min-height:100%;
}

JavaScript

var $child = $('#child');
var height = $child.height();

var $container       = $('#container');
var container_height = $container.height();
$container.resizable();

$child.keyup(function() {
    var h = $child.height();
    if(h > container_height) {
        $container.height(h);
        container_height = h;
    }
});