javascript - 当用户在上面的输入 div 中键入文本并使其更高时，缩短 div 的高度

Question

我有 2 个 div，并希望它们根据彼此的高度调整大小。当我在 Div1 的输入中输入文本时，它会增长。如果它长得比原始高度 40px 高，Div2 应该按 Div 增长的像素数缩小。例如，Div1 的起始高度为:40px，而 Div2 的起始高度为:100px。我输入长文本，Div1 增长到 60px，Div2 应该缩小 20px，高度为 80px。

在 Div 2 中输入内容不应影响 Div1 中的内容，因此我已将 Div2 设置为 overflow-y: auto。

我该怎么做？这就是我所拥有的，但是 javascript 不工作。 var height = $('#inputText').height(); 一直返回 17.600(我真的不知道这个数字是什么意思，它不是 px)。 var height = document.getElementById('inputId').style.height; 始终返回原始 40px。即使 div 增长，这些数字也不会改变。当其中有 2 行文本时，如何获得新的高度？

抱歉这个冗长的问题，希望这是有道理的。谢谢。

html

<div class="div1"
    <input class="inputText" id="inputId" style="width: 230px; height: inherit">
</div>

<div class="editableContent" id="editorId" contentEditable="true" role="textbox"></div>

CSS

.relate {
   border-bottom: 1 px solid rgb(0, 0, 0);
   height: 40px
}

 .relate input.inputText {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0.5rem 0.5rem; 
  }

  .editableContent {
     display: block;
     width: 300px;
     height: 100px;
     overflow-y: auto;
     padding: 0.5rem 0.5rem;
  }

js

var height = $('#inputText').height();
if (height > document.getElementById('inputId').style.height) {
   document.getElementById('editorId').style.height -= height; 
}  

Answer 1

在您的高度定义中，您正在调用一个不存在的 id:

var height = $('.inputText').height();

or:

var height = $('#inputId').height();