我有2个div,并且希望它们根据彼此的高度进行调整。当我在Div1的输入中输入文本时,它会增长。如果它增长得比原始高度40px高,Div2应缩小Div增长的像素数。例如,Div1开始时为height:40px,而Div2开始时为height: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;
}

最佳答案

在您的身高定义中,您正在调用一个不存在的ID:

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

or:

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

10-07 21:51
查看更多