Question

我的代码如下div是可拖动的和Resizable使用JQuery.I希望内部textare基于调整大小的div自动调整大小。下面的代码它适用于宽度但它不获取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>

Answer 1

jQuery resizable div下面的所有内容都需要在CSS中设置-something-的高度（或者设置顶部和底部的绝对定位）。 e.g：

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

快速演示：http://jsfiddle.net/cwolves/KkNRb/

Answer 2

高度：100％仅在父级具有在style或css中定义的固定高度时才有效。

在这里，您需要使用脚本计算高度，并在父div重新调整大小时更新它。

Answer 3

您可以使用JQueryUI的 resizable 的属性 alsoResize 。在我的例子中，以下代码完美地运作：

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

此外，我已禁用浏览器内置的texarea大小调整，以防止它退出父div。

根据父Div划分Textarea的大小

3 个答案: