изменить размер области текста на основе размера окна

У меня есть кнопка максимизации в окне pop, и у меня есть текстовая область и вы хотите изменить ее размер на основе максимального увеличения окна. ниже код для открытия всплывающего окнаизменить размер области текста на основе размера окна

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

источник

2013-04-02 Pankaj

Код для открытия окна, вероятно, не имеет значения. Посмотрите на событие 'window.onresize'. – Boaz

Дайте ему относительную ширину в процентах, как, например:

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

Это должно изменить его размер без JavaScript, когда браузер изменяет размер.

EDIT: Оба Ширин и Высота редактируется, если вы установите их на CSS вашего TEXTAREA в:

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

Это изменение размером текстового соответственно, внутри DIV и подстилающего всплывающего окна.

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

источник

2013-04-02 22:07:11

Это изменит его только по вертикали. Скорее всего, OP означает в обоих измерениях «на основе максимизации окна». – Boaz

Спасибо Hanlet за ваш ответ. Я мог бы изменить размер ширины текстовой области, используя выше, но как я могу настроить высоту? Если я использую height = 100%, я получаю очень тонкую текстовую область :( – Pankaj

@Pankaj, каков размер родителя textarea? Textarea наследует высоту от своего родителя. –

Если вам нужно для тонкой настройки за пределами метода Hanlet Escano (который является большим), и вы разрешили использовать JQuery, я бы рекомендовал использовать функцию resize() следуя общий метод, описанный here чтобы получить размер окна и отрегулировать высоту и ширину вашего textarea соответственно.

источник

2013-04-02 22:12:22

Спасибо за редактирование Boaz. :) –

Вы имеете в виду?

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

Изменить окно 'Результат' и нажмите на кнопку, вы увидите текстовое поле был изменен.

Код прост, я думаю, это может вас вдохновить.

Спасибо советы Moch Daear.

Demo

источник

2015-10-27 03:21:01

изменить размер области текста на основе размера окна

ответ

Смежные вопросы