Question

我希望textarea能够占用尽可能多的垂直空间，而不会重叠任何其他视觉元素。显然不同的屏幕/设备是不同的高度，所以我需要解决方案是流动的（我认为这是正确的术语）。

我看过的其他问题不涉及textareas，而是使用内容已经确定的（子）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中。理想情况下，我希望内容保持在textarea之上。

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

position:absolute和冲突的绝对位置
将height和body的{{1}}设置为100％，以便CSS可以执行计算
在包装div [{1}}或html

height:auto

height:100%

在.vexpand上设置textarea和cols属性，以便它响应rows和textarea

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

流体垂直扩展DIV或TEXTAREA

1 个答案: