Css 流体垂直扩展DIV或TEXTAREA

我想要一个文本区域占据尽可能多的垂直空间，而不重叠任何其他视觉元素。显然，不同的屏幕/设备有不同的高度，所以我需要的解决方案是流体（我认为这是正确的术语）

我研究的其他问题不涉及文本区域，而是使用内容已经确定的（子）div。我不需要textarea动态扩展以适应其内容，我只希望它尽可能高，但不遮挡任何其他元素

我已经收集了类似问题的部分答案，但无法完全做到：

CSS:

HTML:

一些长度/高度可变的内容填充屏幕顶部
要么：1）使蓝色边框的DIV流畅地展开以填充此间隙，要么2）使textarea展开以达到相同的效果

与textarea相关的一行内容必须与textarea一起保存
我听说TextArea需要有效的行和列属性才能正确响应高度和宽度css

此尝试基于假定DIV可以向上扩展的

位置：绝对

和

底部：0

。我这样做是因为DIV/TEXTAREA上面的内容是可变的，因此无法找到一种优雅而健壮的方法从

顶部进行测量

有一行与textarea相关的内容必须与textarea一起保存，因此将此内容和textarea封装在
div
中。理想情况下，我更希望内容保持在文本区域之上

我在相关问题中尝试/看到的事情：


位置：绝对位置和冲突绝对位置

将
body
和
html
的
高度设置为100%，以便CSS可以执行计算

在包装器div
.vexpand
或
文本区域上使用
height:auto
或
height:100%

在
文本区域
上设置
cols
和
行
属性，使其响应
高度
和
宽度
这就是你想要做的吗


谢谢我想要textarea的div（答案中的“.editor”）要填充从“2）结尾的行开始的所有垂直空间，请将textarea扩展到屏幕底部，以达到相同的效果。因此，您希望textarea始终以文档最后一段的结尾开始？如果不想冒元素重叠的风险，您将始终必须设置元素的高度。至少在百分比上。。。还是我完全错了？我想我理解正确了。。。我将使用>您必须定义两个元素的高度。您也可以使用“最小/最大高度”来防止不必要的效果。如果你真的不知道内容的高度，你将不得不使用Javascript来测量。但是如果内容高于身体100%的高度，这也会很糟糕。再次感谢。我已经设法修复了页面顶部的内容，以便使用您的calc（）css建议。
body, html {
    height:100%
}
p {
    text-align:justify
}
textarea {
    resize:vertical;
    height:auto;
    width:100%;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.vexpand {
    border:1px solid blue
}
.vexpand {
    position:absolute;
    bottom:0;
    width:90%;
    height:auto
}

<h2>Some content of variable length / height to fill the top portion of the screen</h2>

<p>Either: 1) make the blue-bordered DIV expand fluidly to fill this gap or 2) make the textarea expand to achieve the same effect</p>
<div class="vexpand">
    <div>One line of content related to the textarea that must be kept with the textarea</div>
    <textarea rows=5 cols=10>I have heard that textareas need valid rows and cols attributes in order to respond correctly to height and width css</textarea>
</div>

body, html {
    height:100%;
    margin: 0;
    padding: 0;
}
p {
    text-align:justify
}
*
{
   box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;   
}

textarea {
    resize:vertical;
    height: calc(100% - 20px) ;
    width:100%;      
}

.text-content
{
    height: 80%;
    overflow: auto;
    padding: 10px;
}

.editor
{
  height: 20%; 
  overflow: hidden;
  padding: 10px;
}