CSS动态文本区域加载高度答案

【问题标题】：CSS dynamic textarea height on loadCSS动态文本区域加载高度
【发布时间】：2022-06-11 08:06:29
【问题描述】：

我遇到了关于容器或/和文本区域高度的 CSS 问题。生成的 div 和 textareas 应该动态设置高度。不幸的是，这并没有像我预期的那样成功。如何更改 CSS，以便附加的 textarea 足够大以适应内容。我不想要溢出滚动条。

data = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ips um has been the industry's standard dummy text ever since the 1500s, when an unknown                printer took a galley of type and scrambled it to make a type specimen book." 

$("#flow-desc").html("")
  for (var i = 0; i < 4; i++) {
    $("#flow-desc").append('<div class="notes-container" id='+ i +'><textarea class="notes-textfield col-10" placeholder="#Notiz">'+ data +'</textarea></div>')             
}

.flow-div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 33.33%;
  background: whitesmoke;
  opacity: 1;
}

.wrapper {
  position: relative;
  margin: 20px;
  height: fit-content;
  background: white;
  border-radius: 10px;
  box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.5),
  15px 15px 15px rgba(70, 70, 70, 0.12);
  padding: 10px;
  overflow-y: auto;
}

.notes-container {
  position: relative;
  margin: 20px;
  height: fit-content;
}

.notes-textfield {
  position: relative;
  border-radius: 10px;
  padding: 10px 10px 0 10px;
  border: none;
  resize: none;
  overflow: hidden;
  height: fit-content;
  border-bottom: 2px solid rgb(0, 50, 115, 0.25);
  width: calc(100% - 20px);
}

#flow-desc {

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="flow-div">
  <div class="wrapper">
    <div id="flow-desc">
    <!-- .. filled by script .. -->
    </div>
  </div>
</div>

【问题讨论】：

标签： css

【解决方案1】：

你可以添加这段代码js：

 data =
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ips um has been the industry's standard dummy text ever since the 1500s, when an unknown                printer took a galley of type and scrambled it to make a type specimen book.";

      $("#flow-desc").html("");
      for (var i = 0; i < 4; i++) {
        $("#flow-desc").append(
          '<div class="notes-container" id=' +
            i +
            '><textarea class="notes-textfield col-10" placeholder="#Notiz">' +
            data +
            "</textarea></div>"
        );
      }

      $("textarea")
        .each(function () {
          this.setAttribute(
            "style",
            "height:" + this.scrollHeight + "px;overflow-y:hidden;"
          );
        })
        .on("input", function () {
          this.style.height = "auto";
          this.style.height = this.scrollHeight + "px";
        });

.flow-div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 33.33%;
  background: whitesmoke;
  opacity: 1;
}

.wrapper {
  position: relative;
  margin: 20px;
  height: fit-content;
  background: white;
  border-radius: 10px;
  box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.5),
    15px 15px 15px rgba(70, 70, 70, 0.12);
  padding: 10px;
  overflow-y: auto;
}

.notes-container {
  position: relative;
  margin: 20px;
  height: fit-content;
}

.notes-textfield {
  position: relative;
  border-radius: 10px;
  padding: 10px 10px 0 10px;
  border: none;
  resize: none;
  overflow: hidden;
  height: fit-content;
  border-bottom: 2px solid rgb(0, 50, 115, 0.25);
  width: calc(100% - 20px);
}

#flow-desc {
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
      integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
      crossorigin="anonymous"
    ></script>

    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
</head>

  <style></style>

  <body>
    <div class="flow-div">
      <div class="wrapper">
        <div id="flow-desc">
          <!-- 
                      .. filled by script .. 
                  -->
        </div>
      </div>
    </div>

  </body>
</html>

【讨论】：