TextArea 填充 div 中的剩余高度

Question

我有一个包含标签、文本区域和按钮的 div：

 <div style="height: 300px;">
   <label>Label</label
   <textarea/>
   <input type="button" value="Save"/>
 </div>

以及 textarea 填充剩余 div 的内容。

textarea如何在不计算的情况下填充剩余高度。如果我给 height: 100% 它给 textarea 一个超出 300px 的高度；

编辑：正如一些评论所建议的那样，我已从文本框更改为文本区域。

另外我想要的是 3 个控件在一个堆栈中一个在另一个下面。

Answer 1

文本输入只能是单行。除非你在谈论巨大的字体大小，否则我认为你的意思是一个允许多行文本输入的 textarea。

使用 flex 容器，子项将自动扩展以覆盖父项的整个高度（align-items: stretch默认）。如果你想禁用这个全高功能，你可以在必要时覆盖它（就像我在你的按钮上所做的那样）。

div {
  display: flex;
  height: 300px;
}

textarea {
  flex: 1; /* consume available width */
}

input {
  align-self: flex-start; /* override flex full-height columns feature */
}

<div>
  <textarea>textbox full height of parent</textarea>
  <input type="button" value="button">
</div>