javascript - 根据 jquery 对话框调整 textarea 的大小

Question

我是 CSS 新手。我有一个 jquery 对话框，里面有一个简单的 textarea，点击一个按钮就会弹出。在弹出带有 textarea 的对话框后，如果我调整 jquery dialog 的大小，我希望 textarea 也可以相对于对话框调整大小。我该如何处理？我们是否有任何 css 属性供它指定？下面是按钮点击事件代码，

   function clickButton(){
      var dlg = $('<div style=width:500;> <textarea style=width:400> Sample text area       </textarea> </div>');
      dlg.dialog({
      width:600
     });
  }

Answer 1

在 textarea 上使用百分比宽度而不是像素宽度。下面的90%（任意选择，随心所欲）是相对于500px对话框的大小，所以如果它被调整大小，textarea 将随之缩放。

var dlg = $('<div style="width:500px;"> <textarea style="width:90%;">Sample text area</textarea> </div>');

作为一种良好做法并确保有效的 HTML 和 CSS，请养成引用 html 属性并明确指定px像素大小的习惯，如下所示：

<div style="width:500px;" />

Answer 2

% width在 the 上使用 atextarea并将其设置box-sizing为border-box使borders和padding包含在width.

<textarea style="width:100%; box-sizing:border-box;"></textarea>