将Button的高度动态设置为Textarea的高度

Question

这是一件小事，但我无法找到关于如何去做的事情！

在下图中，有一个textarea带有样式（和禁用）button纯粹出于审美目的：

但是当您调整textarea的大小时，会发生这种情况：

这看起来不太好。

我想将textarea的动态高度与button的高度联系起来，以便它们在任何高度保持在一起，但我找不到这样的东西。

如何将元素样式与另一个元素绑定？

注意 - 对PHP的信心比jQuery / javascript更有信心，但显然不会拒绝这些语言的答案。

Answer 1

Flexbox可以做到这一点

div {
  display: inline-flex;
  margin: 1em;
}
textarea,
botton {
  flex: 1;
}

<div>
  <textarea id="output">My size will be matched by the button</textarea>
  <button>Click</button>
</div>

Answer 2

最简单的方法是将textarea包装在另一个元素中，并将该父级的display属性设置为flex，如下所示：

div{
  display:flex;
}
textarea{
  resize:vertical;
}

<div>
<textarea></textarea>
<button>text</button>
</div>

根据您的要求和其他样式，您可能需要调整其他一些flexbox属性。有关浏览器支持和前缀的详细信息，请参阅caniuse.com。

Answer 3

这是一种用HTML和CSS做的方法，不需要javascript或php代码：

<div class="container">
<textarea rows="4" cols="50"></textarea>
<button type="button">Click Me!</button>
</div>

.container{
  overflow: auto;
  position: relative;
}

textarea, button{
  float: left;
}

button{
  position:absolute;
  height:100%;
  width:150px;
}

这是一个JsFiddle：https://jsfiddle.net/83uuk6gx/1/

编辑：

你可以删除最小高度，它将在没有它的情况下工作（我从上面的代码中删除了它并更新了jsfiddle）。此外，我不会使用flex，因为它会对早期版本的浏览器施加限制。我相信IE9不支持它，这里有更多细节：http://www.w3schools.com/cssref/css3_pr_flex.asp

Answer 4

使用以下命令禁用textarea的调整：

textarea {
    resize: none;
}

或通过进行必要的更改来使用这个小提琴（我没有创建它）。

http://jsfiddle.net/gbouthenot/D2bZd/