CSS 文本区域自适应高度

在本文中，我们将介绍如何使用CSS来实现文本区域自适应高度的效果。文本区域是在网页中常用的输入框之一，通常用于用户输入多行文本。然而，由于默认情况下文本区域的高度是固定的，当用户输入超出固定高度时，将会显示滚动条，这不利于用户的输入体验。通过CSS的设置，我们可以使文本区域的高度根据内容的多少进行自适应，提供更好的用户体验。

阅读更多：CSS 教程

使用CSS的resize属性调整文本区域大小

CSS的resize属性可以用来控制文本区域是否可以调整大小。默认情况下，文本区域是不可调整大小的。通过将resize属性设置为none或vertical，可以禁用或启用竖直方向上的调整大小功能。例如：

textarea {
  resize: vertical;
}

上述代码将使文本区域在竖直方向上可以调整大小，但在水平方向上不可调整。这样，当用户输入超出固定高度时，文本区域的高度将自动增加，而无需滚动条。

使用CSS的max-height属性实现文本区域自适应高度

CSS的max-height属性可以用来设置文本区域的最大高度。通过将max-height属性设置为一个较大的值，可以使文本区域的高度根据内容的多少自适应。例如：

textarea {
  max-height: 200px;
  overflow-y: auto;
}

上述代码将使文本区域的最大高度为200px，并在内容超出该高度时显示滚动条。这样，当用户输入的内容超出最大高度时，文本区域会自动增加高度，而不会显示滚动条。

使用JavaScript监听文本区域的输入事件

除了使用CSS来实现文本区域自适应高度的效果外，还可以结合JavaScript来实现更复杂的功能。通过监听文本区域的输入事件，可以在用户输入内容时实时调整文本区域的高度。例如：

const textarea = document.querySelector('textarea');
textarea.addEventListener('input', function() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + 'px';
});

上述代码中，通过监听文本区域的input事件，当用户输入内容时，会实时调整文本区域的高度。首先将文本区域的高度设置为auto，然后再将其设置为内容的实际高度。这样，无论用户输入的内容有多少，文本区域都能根据实际高度进行自适应调整。