javascript - 根据窗口大小重新调整文本区域的大小

Question

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

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);

Answer 1

给它一个百分比相对宽度，如下所示：

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

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

编辑：如果您在 textarea 的 css 上设置宽度和高度，它们都会被编辑：

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

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

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

Answer 2

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

Answer 3

你是这个意思吗？

<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);
});

更改“结果”窗口，然后单击按钮，您会发现 textarea 已调整大小。

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

感谢 Moch Daear 的提示。