0

有没有办法使这两个彼此相邻浮动的文本区域始终具有相同的高度。它们的容器的高度，当其中一个被调整大小时会扩展。我尝试将它们放在容器 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;
}
4

3 回答 3

2

这将有效：

$(".t").mouseup(function(){
    $(".t").not($(this)).css("height", parseInt($(this).css("height"),10));
});

您可以使用mousemove而不是mouseup“实时”效果。

于 2013-10-26T12:29:52.533 回答
0

尝试将 textarea 的高度设置为 100%，将容器的高度设置为 150px。当 textarea 为 100% 时，它会自动适应您父 div 的高度，希望这会有所帮助。

textarea {      
    height: 100%;
    width: 100%;
    display: block;
}

div.container{ 高度：150px; 最小高度：150px；边框：1px纯黑色；显示：内联块；}

于 2013-10-26T12:37:04.340 回答
0

您可以使用 javascript 来实现以下场景。一旦父元素改变了它的尺寸，例如高度，你调用函数（ES6 Javascript 版本）：

const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {

  document.querySelectorAll(someTextareaSelector)[0].style.height = 
    document.querySelectorAll(someParentElementSelector)[0]
    .getBoundingClientRect().height + "px"

}

const someTextareaSelector = '...' 
const someParentElementSelector = '...'
makeDimensionsEqual(someTextareaSelector, someParentElementSelector)
于 2018-12-06T01:33:07.167 回答