如何通过JavaScript和CSS实现textarea高度向上扩展？

要让textarea向上扩展，核心是通过CSS定位固定元素的底部位置，使其高度增加时向上延伸，配合JavaScript动态计算内容高度。以下是具体修改：

1. CSS 调整 #

需添加父容器提供定位上下文，同时固定textarea的底部位置：

/* 父容器：约束textarea的定位范围 */
.textarea-container {
  position: relative;
  min-height: 40px; /* 对应textarea初始高度 */
  max-height: 200px; /* 限制textarea最大高度 */
}

textarea {
  resize: none;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 200px;
  box-sizing: border-box; /* 确保内边距不干扰高度计算 */
}

/* 滚动条样式优化（可选） */
textarea::-webkit-scrollbar {
  width: 8px;
}
textarea::-webkit-scrollbar-track {
  background: #f1f1f1;
}
textarea::-webkit-scrollbar-thumb {
  background: #888;
}

2. JavaScript 调整 #

保留动态计算高度的逻辑，优化高度重置与滚动条控制：

function auto_grow(element) {
  // 重置高度以获取准确的内容高度
  element.style.height = "auto";
  const contentHeight = element.scrollHeight;
  const maxHeight = parseInt(window.getComputedStyle(element).maxHeight);
  
  // 限制高度不超过最大值
  element.style.height = Math.min(contentHeight, maxHeight) + "px";
  // 内容超出最大高度时显示滚动条
  element.style.overflowY = contentHeight > maxHeight ? "scroll" : "hidden";
}

3. HTML 调整 #

用父容器包裹textarea，保留输入触发事件：

<div class="textarea-container">
  <textarea rows="1" oninput="auto_grow(this)"></textarea>
</div>

核心逻辑说明 #

• 父容器的position: relative确保textarea的绝对定位仅相对于容器，不会脱离布局流。
• textarea设置bottom: 0后，高度增加时会向上扩展，底部位置始终固定。
• 先重置高度为auto再计算scrollHeight，避免旧高度缓存导致的计算偏差。

内容的提问来源于stack exchange，提问作者user1753640