css让textarea自适应高度

封面图 • 2025-12-02 • Html/Css

在 CSS 中，`<textarea>` 默认是固定高度的。如果你希望它**根据内容自动调整高度**，可以通过以下几种方法实现：

---

### ✅ 方法一：使用 `resize: none;`（仅限制手动调整）

```css
textarea {
  resize: none; /* 禁止用户手动调整大小 */
}
```

这不会让 `textarea` 自动变高，只是防止用户拉伸。

---

### ✅ 方法二：使用 JavaScript 动态调整高度

这是最常用的方法，通过 JavaScript 监听输入事件，动态设置 `textarea` 的高度。

#### HTML:

```html
<textarea id="autoResizeTextarea"></textarea>
```

#### CSS:

```css
#autoResizeTextarea {
  width: 100%;
  min-height: 50px;
  padding: 10px;
  box-sizing: border-box;
  resize: none; /* 禁止用户手动调整 */
}
```

#### JavaScript:

```javascript
const textarea = document.getElementById('autoResizeTextarea');

textarea.addEventListener('input', () => {
  textarea.style.height = 'auto'; // 先重置高度
  textarea.style.height = textarea.scrollHeight + 'px';
});
```

---

### ✅ 方法三：使用 CSS `height: auto;` 和 `overflow: hidden;`（不推荐）

虽然可以尝试用 CSS 实现，但兼容性不好，且不能完全可靠地工作。

```css
textarea {
  height: auto;
  overflow: hidden;
}
```

这种方法在某些浏览器中可能不起作用，建议还是使用 JavaScript 方式。

---

### ✅ 方法四：使用 CSS `min-height` + JS 自适应（更健壮）

```css
textarea {
  width: 100%;
  min-height: 50px;
  padding: 10px;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
}
```

```javascript
const textarea = document.querySelector('textarea');

function adjustHeight() {
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
}

textarea.addEventListener('input', adjustHeight);
// 初始调用一次
adjustHeight();
```

---

### ✅ 总结

| 方法 | 是否自适应 | 是否需要 JS | 推荐度 |
|------|------------|-------------|--------|
| `resize: none;` | ❌ | ❌ | ⚠️ 不推荐 |
| JavaScript 动态调整 | ✅ | ✅ | ✅✅✅ |
| CSS `height: auto;` | ⚠️ | ❌ | ⚠️ 不推荐 |
| CSS + JS 混合 | ✅ | ✅ | ✅✅✅ |

---

如果你需要一个**完整的自适应 `textarea` 示例**，我可以提供完整代码。需要的话请告诉我！