html - TextArea在div中填充剩余高度

Question

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

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

以及文本区域如何填充剩余的 div。

不计算textarea如何填充剩余高度。如果我给 height: 100% 它给文本区域一个超出 300px 的高度；

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

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

Answer 1

一个文本输入只能是single line .除非您谈论的是巨大的字体大小，否则我认为您指的是文本区域，它允许多行文本输入。

使用 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>