Есть ли способ сделать эти два текстовых поля, которые плавают рядом друг с другом, всегда будет одинаковой высоты. Высота их контейнера, который расширяется, когда один из них изменяется. Я попытался поместить их в контейнер div и установил их высоту до 100%. Я попытался сделать функцию jquery, чтобы изменить ее размер (вы можете видеть, как она закомментирована в скрипке), которая не удалась.
http://jsbin.com/IkESUli/6/edit
Как я могу сделать их всегда одинаковой высоты после изменения размера?
textarea{
min-height:150px;
float:left;
display:inline-block;
overflow:auto;
}
#t2{
width:30px;
overflow:hidden;
text-align: right;
white-space:nowrap;
}
div.container{
min-height:150px;
border:1px solid black;
display:inline-block;
}
Это будет работать:
$(".t").mouseup(function(){
$(".t").not($(this)).css("height", parseInt($(this).css("height"),10));
});
Вы можете использовать mousemove
вместо mouseup
для эффекта "реального времени".
Вы можете использовать javascript для реализации следующего сценария. Как только родительский элемент изменит свои параметры, например высоту, вы вызываете functios (версия J6 для ES6):
const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {
document.querySelectorAll(someTextareaSelector)[0].style.height =
document.querySelectorAll(someParentElementSelector)[0]
.getBoundingClientRect().height + "px"
}
const someTextareaSelector = '...'
const someParentElementSelector = '...'
makeDimensionsEqual(someTextareaSelector, someParentElementSelector)
попробуйте установить высоту textarea на 100% и высоту контейнера до 150 пикселей. когда textarea находится на 100%, он автоматически вписывается в ваш родительский div, надеюсь, это поможет.
textarea {
height: 100%;
width: 100%;
display: block;
}
div.container {height: 150px; min-height:150px; мин-высота: 150px; border:1px solid black; граница: 1px сплошной черный; display:inline-block; Дисплей: встроенный блок; } }