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

Question

I have maximize button in pop window, and i have a text area and want to re-size it based on maximizing the window. below are the code for opening the pop up window

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

Give it a percentage relative width as such:

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

This should resize it without javascript when the browser is resized.

EDIT : Both Width and Height are edited if you set them on your textarea's css:

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

This would resize the textarea accordingly, inside the div and the underlying popup window.

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

Answer 2

如果您需要微调HanletEscaño的方法（很棒），并且可以使用jQuery，我建议按照此处概述的常规方法使用resize()函数来获取窗口的大小并调整高度和您的textarea宽度。

Answer 3

Do you mean it ?

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

Change the 'Result' window, and click the button, you will find the textarea has been resized.

The code is simple, I think it may inspire you.

Thanks Moch Daear's tips.