我有一个包含标签、文本区域和按钮的 div:
<div style="height: 300px;">
<label>Label</label
<textarea/>
<input type="button" value="Save"/>
</div>
以及文本区域如何填充剩余的 div。
不计算textarea如何填充剩余高度。如果我给 height: 100% 它给文本区域一个超出 300px 的高度;
编辑: 正如一些评论所建议的,我已经从文本框更改为文本区域。
另外我想要的是 3 个控件在一个下面的堆栈中。
最佳答案
一个文本输入只能是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>
关于html - TextArea在div中填充剩余高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42978311/