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增长，这些数字也不会改变。当有两行文字时，如何获得新的高度？

对于冗长的问题感到抱歉，希望这是有道理的。谢谢。

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();

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

1 个答案: