Javascript 使div跟随自动调整大小文本区域？

问题
我有一个评论文本区，由于Jack Moores npm软件包，我使其文本响应。现在这一切都很好，但我有一个div，通常是底部：75px；当textarea自动调整大小时，它会更新textarea的高度。这就是问题发生的地方，例如，我想更新那个div的底部，以防止它越过textarea

HTML

<form action="#">
            <textarea
              type="text"
              id="text"
              spellcheck="false"
              placeholder="Type message..."
              maxlength="50"            
            ></textarea>
          </form>
          <div class="three_dots_messages" onclick="toggleMessagesSettings()"></div>
          <div class="three_dots_messages_menu">
            <div class="three_dots_messages_menu_buttons">
              <div class="send_tip_button all_message_buttons" >
                <span>Send tip</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="7.886" height="15" viewBox="0 0 7.886 15"  style="margin: 2px 0 0 2px ;">
                  <path id="Icon_awesome-dollar-sign" data-name="Icon awesome-dollar-sign" class="cls-1" d="M5.731,6.838,2.773,5.912a.861.861,0,0,1-.581-.829A.837.837,0,0,1,3,4.219H4.817a1.6,1.6,0,0,1,.937.308.406.406,0,0,0,.534-.059l.953-1a.5.5,0,0,0-.049-.718,3.716,3.716,0,0,0-2.369-.879V.469A.456.456,0,0,0,4.384,0H3.507a.456.456,0,0,0-.438.469V1.875H3a3.133,3.133,0,0,0-2.985,3.5,3.293,3.293,0,0,0,2.3,2.83l2.807.879a.864.864,0,0,1,.581.829.837.837,0,0,1-.808.864H3.075a1.6,1.6,0,0,1-.937-.308.406.406,0,0,0-.534.059l-.953,1a.5.5,0,0,0,.049.718,3.716,3.716,0,0,0,2.369.879v1.406A.456.456,0,0,0,3.507,15h.876a.456.456,0,0,0,.438-.469V13.119a3.108,3.108,0,0,0,2.9-2.13A3.264,3.264,0,0,0,5.731,6.838Z" transform="translate(-0.003)"/>
                </svg>
              </div>
              <div class="chat_rules_button all_message_buttons" >
                <span>Chat rules</span> 
                <svg xmlns="http://www.w3.org/2000/svg" width="13.125" height="15" viewBox="0 0 13.125 15">
                  <path id="Icon_awesome-book-dead" data-name="Icon awesome-book-dead" class="cls-1" d="M7.969,3.984A.469.469,0,1,0,7.5,3.516.47.47,0,0,0,7.969,3.984ZM13.125,10.5V.75a.69.69,0,0,0-.75-.75H2.813A2.762,2.762,0,0,0,0,2.813v9.375A2.762,2.762,0,0,0,2.813,15h9.563a.739.739,0,0,0,.75-.75v-.469a.81.81,0,0,0-.281-.562,8.292,8.292,0,0,1,0-2.156.567.567,0,0,0,.281-.562ZM7.031,1.641A2.15,2.15,0,0,1,9.375,3.516a1.778,1.778,0,0,1-.937,1.491v.384a.47.47,0,0,1-.469.469H6.094a.47.47,0,0,1-.469-.469V5.007a1.778,1.778,0,0,1-.937-1.491A2.15,2.15,0,0,1,7.031,1.641Zm-3.375,4.9.185-.431a.233.233,0,0,1,.308-.123l2.88,1.233L9.911,5.988a.233.233,0,0,1,.308.123l.185.431a.233.233,0,0,1-.123.308l-2.06.885,2.06.882a.233.233,0,0,1,.123.308l-.185.431a.233.233,0,0,1-.308.123L7.031,8.244,4.151,9.48a.233.233,0,0,1-.308-.123l-.185-.431a.233.233,0,0,1,.123-.308l2.063-.882L3.779,6.85a.233.233,0,0,1-.123-.308Zm7.5,6.583H2.813a.886.886,0,0,1-.937-.937.939.939,0,0,1,.938-.937h8.344ZM6.094,3.984a.469.469,0,1,0-.469-.469A.47.47,0,0,0,6.094,3.984Z"/>
                </svg>              
              </div>
              <div class="muted_users all_message_buttons" >
                <span>Muted users</span> 
                <svg xmlns="http://www.w3.org/2000/svg" width="16.071" height="15" viewBox="0 0 16.071 15">
                  <path id="Icon_metro-volume-mute2" data-name="Icon metro-volume-mute2" class="cls-1" d="M18.642,13.15V14.57H17.222l-1.794-1.794L13.634,14.57H12.214V13.15l1.794-1.794L12.214,9.562V8.142h1.421l1.794,1.794,1.794-1.794h1.421V9.562l-1.794,1.794ZM9.535,18.856a.535.535,0,0,1-.379-.157L5.027,14.57H3.106a.536.536,0,0,1-.536-.536V8.677a.536.536,0,0,1,.536-.536H5.027L9.156,4.013a.536.536,0,0,1,.915.379V18.32a.536.536,0,0,1-.536.536Z" transform="translate(-2.571 -3.856)"/>
                </svg>

              </div>
              <div class="close_chat_button all_message_buttons" onclick="toggleMessagesSettings(), toggleMessages() ">
                 <span>Close chat</span> 
                 <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
                  <path id="Icon_material-close" data-name="Icon material-close" class="cls-1" d="M22.5,9.011,20.989,7.5,15,13.489,9.011,7.5,7.5,9.011,13.489,15,7.5,20.989,9.011,22.5,15,16.511,20.989,22.5,22.5,20.989,16.511,15Z" transform="translate(-7.5 -7.5)"/>
                </svg>            
              </div>
            </div>
          </div>

一些信息和问题

我需要保持它的绝对位置，而不仅仅是用保证金来解决这个问题

我知道我可以修改autosize的js，但我诚实地说 没有足够的技能来完全理解正在发生的一切 开

有没有一种方法可以操纵DOM，这样我就可以在textarea中生成div子对象

你知道简单的js修复吗

JS for autoresize太大了，你可以从网站上查看

---

最好只需将菜单移动到文本区域之前的一个点，并移除其固定位置，使其自动保持原位

如果您想动态地调整它，Autosize会触发一个事件，您可以在其中钩住一些代码来更新它的位置

var $text = jQuery('#text'),
    $menu = jQuery('.three_dots_messages_menu'),
    baseDistance = 75;

$text.on( 'autosize:resized', function() {
  $menu.css( 'bottom', $text.height() + baseDistance + 'px' );
})

---

你能发布你的代码吗？可以添加代码片段。请添加一个带有html、css和js的剪贴。只需使用jsfiddle.net来共享它。或者将其粘贴为文本。在后面的选项中，请仅粘贴与您的应用程序相关的代码issue@MarcvanNieuwenhuijzen刚刚添加了html和css，autresize的JS代码太大了~225lines@SimoneRossaini添加了代码和代码片段

var $text = jQuery('#text'),
    $menu = jQuery('.three_dots_messages_menu'),
    baseDistance = 75;

$text.on( 'autosize:resized', function() {
  $menu.css( 'bottom', $text.height() + baseDistance + 'px' );
})