Question

我有一个包含标签，textarea和按钮的div：

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

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

textarea如何在不计算的情况下填充剩余高度。如果我给出高度：100％它给textarea一个高于300px的高度;

编辑：我已经从textbox更改为textarea，正如一些评论建议的那样。

另外我想要的是3个控件一个在另一个之下。

Answer 1

文字输入只能是single line。除非你在谈论巨大的字体大小，否则我认为你的意思是一个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>

TextArea填充div中的剩余高度

1 个答案: