使textarea高度扩展到容器div的高度（在调整大小时）

Question

Is there a way to make these two textareas that are floated next to one another always be the same height. The height of their container, which expands when one of them is resized. I've tried putting them in a container div and setting their height to 100%. I've tried making a jquery function to resize them (you can see it commented out in the fiddle) which failed.

http://jsbin.com/IkESUli/6/edit

How can I make them always the same height after a resize?

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;
}

Answer 1

This will works:

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

You could use mousemove instead of mouseup for "real time" effect.

Answer 2

try setting textarea's height to 100% and container's height to 150px. when textarea is in 100% it will automatically fits into your parent div's height, hope this helps.

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

div.container{ height: 150px; min-height:150px; border:1px solid black; display:inline-block; }

Answer 3

You can use javascript to implement the following scenario. Once the parent element changes its dimentions, for instance, height, you call the functios (ES6 Javascript version):

const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {

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

}

const someTextareaSelector = '...' 
const someParentElementSelector = '...'
makeDimensionsEqual(someTextareaSelector, someParentElementSelector)