Resize Textarea based on parent Div

I have code as below div is draggable and Resizable using JQuery.I want the inner textare to be resized automatically based on resized div.With code below it works fine for width but it does not acquire full height of div .

 <div class="dragDiv" id="dragDiv">   <textarea  style="width:100%;height:100%;background-color:Transparent;font-family:Arial;font-size:11pt;border:开发者_运维技巧 1px;color: white;" id="Text" name="Text"></textarea>
        <br/><input type="submit" value="Mark" onclick="MarkImage()" />
    </div>

Everything below the jQuery resizable div needs to have height set to -something- in CSS (or absolute positioning with top and bottom both set). e.g.:

<div class="Resizable">
    <div style="height:100%">
        <div style="height:100%">
            <textarea></textarea>
        </div>
     </div>
 </div>

quick demo: http://jsfiddle.net/cwolves/KkNRb/

height: 100% works only if parent has a fixed height defined in style or css.

Here, you need to calculate height with scripts and update it when parent div resizes.

You can use attribute alsoResize of JQueryUI's resizable. In my case the following code worked perfectly:

var box=$('#dragDiv');
box.resizable({alsoResize: box.find('textarea').css('resize', 'none'),
               minHeight: '200',
               minWidth: '400'});

Also I've disabled browser built-in resizing of texarea to prevent it from getting out of the parent div.