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

如果您需要在HanletEscaño的方法之外进行微调（这很棒）并且您被允许使用jQuery，我建议您按照here概述的一般方法使用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);
});

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

代码很简单，我认为它可能会激励你。

感谢Moch Daear的提示。

Demo

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

3 个答案: