高度：自动不适用于当前 css

Question

不确定是不是因为位置设置为绝对，但我找不到将高度设置为自动的方法，根据 div 内的内容调整高度。有什么建议么？

  #addForm {
    position: absolute;
    bottom: 20vh;
    padding-bottom: 35px;
    padding-top: 20px;
    width: 40%;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }



 <div id="addForm" class="text-center">
    <button id="closeAddFrm" class="formX">X</button>
    <button id="addRemBtn">Reminder</button>
    <button id="addTaskBtn">Task</button>
    <button id="addEventBtn">Event</button>

    <form id="remFrm">
      <div class="remTitleFrm">
        <input placeholder="Reminder Title"/>
      </div>
      <div class="remMsgFrm">
        <textarea></textarea>
      </div>
      <button class="saveFrmBtn">Save</button>
    </form>

    <form id="taskFrm" style="display: none;">
          <textarea></textarea>
          <button class="saveFrmBtn">Save</button>
    </form>

    <form id="eventFrm" style="display: none;">
         <textarea></textarea>
         <button class="saveFrmBtn">Save</button>
    </form>
 </div>

Answer 1

您需要删除 css 属性 bottom:20vh;

  #addForm {
    position: absolute;
    /* bottom: 20vh; */
    padding-bottom: 35px;
    padding-top: 20px;
    width: 40%;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

Answer 2

好吧，我在这里使用了一个外部库，它动态地扩展了文本区域。希望这有帮助:)

autosize(document.getElementById("text"));

textarea#text {
    width:100%;
 box-sizing:border-box;
 direction:rtl;
 display:block;
 max-width:100%;
 line-height:1.5;
 padding:15px 15px 30px;
 border-radius:3px;
 border:1px solid #F7E98D;
 font:13px Tahoma, cursive;
 transition:box-shadow 0.5s ease;
 box-shadow:0 4px 6px rgba(0,0,0,0.1);
 font-smoothing:subpixel-antialiased;
 background:linear-gradient(#F9EFAF, #F7E98D);
 background:-o-linear-gradient(#F9EFAF, #F7E98D);
 background:-ms-linear-gradient(#F9EFAF, #F7E98D);
 background:-moz-linear-gradient(#F9EFAF, #F7E98D);
 background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
  }

<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
         <textarea id="text"></textarea>

高度：自动不适用于当前 css

height: auto not working with current css

css

height