TextArea填充div中的剩余高度 [英] TextArea fill remaining height in a div

问题描述

我有一个div，其中包含标签，文本区域和按钮:

I have a div that contains a label, a textarea and a button:

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

以及文本区域填充剩余div的内容.

and what for the textarea to fill the remaining div.

文本区域如何在不计算的情况下填充剩余高度.如果我给定高度:100％，它将使textarea的高度超出300px；

How can the textarea fill the remaining height without calculating it. If I give height: 100% it gives the textarea a height that is outside the 300px;

根据一些评论的建议，我已从文本框更改为文本区域.

I have changed from textbox to textarea as some comments suggested.

我还想要将3个控件放在另一个堆栈中.

Also what I want are the 3 controls to be in a stack one below the other.

推荐答案

文本输入只能是单行.除非您谈论的是巨大的字体，否则我想您的意思是一个允许多行文本输入的文本区域.

A text input can only be single line. Unless you're talking about huge font size, I presume you mean a textarea, which allows multiline text input.

使用flex容器，子代将自动展开以覆盖父代的全部高度(默认为 align-items:Stretch ).如果您想禁用此全高功能，则可以在必要时覆盖它(就像我在按钮上所做的那样).

With a flex container, the children will automatically expand to cover the full height of the parent (align-items: stretch default). If you want to disable this full-height feature, you can override it where necessary (as I did on your button).

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中的剩余高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！