根据父级 Div 调整文本区域大小

Question

我有以下代码，使用JQuery使div可拖动和调整大小。我希望内部文本区域根据调整大小的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>

- Pit Digger

Answer 1

在jQuery可调整大小的div下面的所有内容都需要在CSS中设置高度（或使用同时设置了顶部和底部的绝对定位）。例如：

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

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

- user578895

Answer 2

只有在父元素具有在样式或CSS中定义的固定高度时，height: 100% 才能起作用。

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

- MadBender

Answer 3

你可以使用JQueryUI的resizable属性alsoResize。在我的情况下，以下代码完美地工作：

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

此外，我已禁用浏览器内置的文本区域重新调整大小功能，以防止其超出父级div。

- Liubov