根据窗口大小调整文本区域的大小答案

【问题标题】：re-size text area based on window size根据窗口大小调整文本区域的大小
【发布时间】：2013-03-24 09:41:51
【问题描述】：

我在弹出窗口中有最大化按钮，并且我有一个文本区域并希望根据最大化窗口来重新调整它的大小。下面是打开弹窗的代码

var url = "mypopup.do" + params;
var modalprops = "height=310px,width=400px,scrollbars=yes,status=no,menubar=no,resizable=yes";
window.open(url, 'winName', modalprops, false);

【问题讨论】：

打开窗口的代码可能不相关。查看window.onresize 事件。

标签： javascript

【解决方案1】：

你是这个意思吗？

<div>
    <textarea id='debug'></textarea>
    <button>Resize</button>
    <textarea id='test'>some words</textarea>
</div>

jQuery

 $("button").click(function () {
    var viewportWidth = $(window).width() - 50; // -50 only want to show beacutiful >3
    var viewportHeight = $(window).height() - 90;
    $('#test').height(viewportHeight);
    $('#test').width(viewportWidth);
    $('#debug').text(viewportWidth + ':' + viewportHeight);
});

改变'Result'窗口，点击按钮，你会发现textarea已经调整大小了。

代码很简单，我想它可能会启发你。

感谢 Moch Daear 的提示。

【讨论】：

【解决方案2】：

给它一个相对宽度的百分比：

<textarea style="width:100%"></textarea>

当浏览器调整大小时，这应该在没有 javascript 的情况下调整它。

EDIT：如果您在 textarea 的 css 中设置 Width 和 Height，它们都会被编辑：

<div style="width:40%;height:40%">
    <textarea style="width:100%; height:100%;"></textarea>
</div>

这将在 div 和底层弹出窗口内相应地调整 textarea 的大小。

jsBin：http://jsbin.com/odukur/1/

【讨论】：

这只会垂直调整它的大小。这可能是based on maximizing the window 中两个维度的 OP 意思。
感谢 Hanlet 的回复。我可以使用上面的方法来调整文本区域的宽度，但是如何调整高度？如果我使用 height=100%，我会得到一个非常薄的文本区域 :(
@Pankaj，textarea 的父级大小是多少？ Textarea 将从其父级继承高度。
您链接的 jsBin 显示了一个正好两行高的文本区域。我如何根据需要使它适应窗口的行数？？？

【解决方案3】：

如果您需要在 Hanlet Escaño 的方法（这很棒）之外进行微调，并且您可以使用 jQuery，我建议您使用 resize() 函数，遵循概述的通用方法 here 来获取大小窗口并相应地调整textarea 的高度和宽度。

【讨论】：