建立< textarea>填充剩余高度 [英] Make a <textarea> fill remaining height

问题描述

我从这个问题如何使一个HTML元素填充容器的剩余高度。但它似乎不工作与< textarea> 。这个小提琴比较 display：table-row 对< textarea> 和< div> ：

I learned from this question how to make an HTML element fill the remaining height of a container. But it doesn't seem to be working with <textarea>. This Fiddle compares the effects of display: table-row on a <textarea> and a <div>:

http://jsfiddle.net/b4Tt8/2/

为什么有区别，如何在textarea上获得合适的效果？ / p>

Why the difference, and how can I get the appropriate effect on the textarea?

推荐答案

您可以使用flexbox根据其父项设置textarea高度。

You can use flexbox to set your textarea height according to its parent.

HTML

HTML

<div class="container">
  <div class="btn-wrapper">
    <button>X</button>
  </div>
  <textarea></textarea>
</div>

CSS

.container {
  height: 220px;
  width: 220px;
  background-color: pink;
  display: flex;
  flex-direction: column; 
 } 

.container textarea {
  box-sizing: border-box; /* fit parent width */
  height: 100%;
}

jsFiddle

这篇关于建立< textarea>填充剩余高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！