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