css - 流畅地垂直扩展 DIV 或 TEXTAREA

Question

我希望文本区域在不与任何其他视觉元素重叠的情况下占据尽可能多的垂直空间。显然，不同的屏幕/设备具有不同的高度，因此我需要流畅的解决方案(我认为这是正确的术语)。

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

我已经收集了类似问题的部分答案，但不能完全解决问题: http://jsfiddle.net/wa5zU/

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
}

HTML:

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

本次尝试基于position:absolute和bottom:0假设DIV可以向上扩展。我这样做是因为 DIV/TEXTAREA 上方的内容是可变的，所以无法找到一种优雅而稳健的方式来从 top 开始测量。

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

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

• position:absolute 和冲突的绝对位置
• 将body和html的height设置为100%，以便CSS进行计算
• 在包装器 div .vexpand 或 textarea 上使用 height:auto 或 height:100%/li>
• 在 textarea 上设置 cols 和 rows 属性，使其响应 height 和 宽度

Answer 1

这是你想做的吗？

http://jsfiddle.net/wa5zU/2/

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;
}