如何自动向上扩展文本区域？答案

【问题标题】：How to auto expand text-area upwards?如何自动向上扩展文本区域？
【发布时间】：2022-01-24 23:42:23
【问题描述】：

我在卡片页脚上有一个自动扩展的文本区域。 https://jsfiddle.net/6f9a52we/

我可以让它向上扩展而不是向下扩展？所以当它向上扩展时，卡体应该收缩。正如我们在 Gmail 聊天中看到的那样。

我尝试使用 position: absolute;和底部：0px；。在这种情况下，向上扩展工作得很好，但是由于绝对位置，扩展的文本区域覆盖了卡体中的文本。请在不使用 position:absolute 的情况下提出任何想法？

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card">
    <div class="card-body">
        card body line 1<br>
        card body line 2<br>
        card body line 3<br>
        card body line 4<br>
        card body line 5
    </div>
    <div class="card-footer">
      <textarea id="myTextArea" placeholder="type here"></textarea>
   </div>
</div>
</body>
</html>

$(function() {
  $('#myTextArea').on('input keyup paste', function() {
    var $el = $(this),
        offset = $el.innerHeight() - $el.height();

    if ($el.innerHeight() < this.scrollHeight) {
      // Grow the field if scroll height is smaller
      $el.height(this.scrollHeight - offset);
    } else {
      // Shrink the field and then re-set it to the scroll height in case it needs to shrink
      $el.height(1);
      $el.height(this.scrollHeight - offset);
    }
  });
});

  .card{
        text-align: center;
        width: 50%;
        margin:0 auto;
    }
    .card-body{
        overflow-y: auto;
        height: 150px;
    }

【问题讨论】：

标签： javascript html css reactjs chat

【解决方案1】：

为您的班级卡片添加最大高度。

  .card{
    text-align: center;
    width: 50%;
    max-height: 250px;
    margin:0 auto;
}

【讨论】：

哇！那太好了！我一直在努力解决这个问题，哈哈。谢谢 :) 完美