使<textarea>填充剩余高度

Question

我从这个问题中学到了如何使HTML元素填充容器的剩余高度.但它似乎没有合作<textarea>.这个小提琴比较display: table-rowa <textarea>和a 的效果<div>:

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

为什么不同,我怎样才能在textarea上获得适当的效果？

Answer 1

您可以使用flexbox根据其父级设置textarea高度.

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

Answer 2

如果您设置固定高度，那么button您可以使用定位并执行如下操作：

HTML：（删除 br 标签）

<div class="container">
    <button>X</button>
    <textarea></textarea>
</div>
<div class="container">
    <button>X</button>
    <div>Text</div>
</div>

CSS

.container {
    height: 220px;
    width: 220px;
    background-color: pink;
    display: table;
}
.container > button {
    display: table-row;
}
.container > textarea, .container > div {
    display: table-row;
    border: none;  /* if you keep border then textarea will go out of the parent element */
    height: 200px; /* hardcoded */
    padding: 0px;  /* removing padding for chrome */
    width: 100%;
    background-color: cyan;
}

工作小提琴