textarea设置宽高

### 设置 HTML `textarea` 元素的高度和宽度

#### 使用 cols 和 rows 属性
在 HTML 中，可以直接利用 `cols` 和 `rows` 属性来定义 `textarea` 的初始大小。这两个属性分别指定了文本框可见列数（宽度）以及行数（高度）。需要注意的是，这些单位基于字符而非像素测量。

<textarea name="message" cols="40" rows="5"></textarea>

此方法简单直观，但在不同浏览器中的表现可能有所差异[^3]。

#### 应用 CSS 样式控制尺寸
为了获得更精确的布局效果，推荐采用 CSS 来设定具体的宽度 (`width`) 及高度 (`height`) 值：

/* 定义固定的宽高 */
textarea {
    width: 300px;
    height: 150px;
}

或者让其响应容器大小变化：

/* 继承父级 div 的可用空间 */
textarea {
    width: 100%;
    min-height: 100px; /* 设定最小高度 */
    max-height: none;  /* 或者指定最大高度 */
    box-sizing: border-box; /* 确保 padding/border 不影响整体尺寸 */
}

当希望实现自动调整高度的功能时，则需借助 JavaScript 实现动态计算并更新样式[^1]。

#### Vue.js 下的应用实例
如果是在 Vue 框架内开发应用，还可以使用特定的方法如 `autoTextarea()` 函数来自动生成合适的高度，并监听输入事件实时调整[^2]。

// 示例：Vue 方法绑定
methods: {
    autoResize() {
        this.$refs.textarea.style.height = 'auto';
        this.$refs.textarea.style.height = `${this.$refs.textarea.scrollHeight}px`;
    }
},
mounted() {
    this.autoResize();
}