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

Question

This is a little thing, but I can't find anything at all in regard on how to go about doing it!

In the picture below, there is a textarea with a styled (and disabled) button purely for aesthetic purposes:

But when you resize the textarea , this happens:

This doesn't look so great.

I want to tie the dynamic height of the textarea to the height of the button so that they stay together at whatever height, but I cant find anything like this.

How do you tie an elements styling to another's?

Note - Much more confident at PHP than jQuery/javascript, but obviously won't refuse answers in those languages.

Answer 1

Flexbox can do that

 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

The easiest way would be to wrap the textarea within another element and set the display property of that parent to flex , like so:

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

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

Depending on your requirements and other styles, you may need to adjust some of the other flexbox properties. See caniuse.com as well for details on browser support and prefixing.

Answer 3

Here is a way to do it with HTML and CSS, no javascript or php code needed:

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

Here is a JsFiddle: https://jsfiddle.net/83uuk6gx/1/

EDIT:

You can remove the min-height, it will work without it (I removed it from code above and updated jsfiddle). Also I would not use flex as it will impose restrictions on earlier version of the browsers. IE9 does not support it I believe, here is more details on it: http://www.w3schools.com/cssref/css3_pr_flex.asp

Answer 4

Either disable the resise of textarea using the following :

---

textarea {
    resize: none;
}

---

or use this fiddle(I did not create it) by making necessary changes.

---

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

---