Html 父块的100%高度减去上面的内容？

我有这样的想法：

<div class="block">
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias illo, magni dolores animi at rem laboriosam quisquam vitae voluptatibus possimus officia dolore nobis. Aspernatur, perspiciatis nobis ipsum et ullam adipisci.
    </div>
    <div class="textarea"><textarea name="" cols="30" rows="10"></textarea></div>
</div>

您可以在这里看到它的外观：

在没有JS的情况下，是否可以只使用CSS使

.textarea

部分达到父块的100%高度，而不使用

.text

部分的高度？和

。text

节高是动态的，取决于内容长度。

根据要求，您可以始终使用flex box型号，如下所示：

*{
框大小：边框框；
保证金：0；
填充：0；
}
.街区{
背景：#eee；
填充：10px；
宽度：500px；
高度：500px；
显示器：flex；
弯曲方向：立柱；
}
文本区{
宽度：100%；
弹性：1；
}

Lorem ipsum dolor sit amet，奉献精英。别名illo，rem实验室的magni dolores animi，主要负责人。从侧面看，透明隐孢子虫属于同侧隐孢子虫和阿迪皮西隐孢子虫。

太棒了。很好的解决方案+1.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.block {
    background: #eee;
    padding: 10px;
    width: 500px;
    height: 500px;
}

.textarea {
    height: 100%;
}

.textarea textarea {
    width: 100%;
    height: 100%;
}