如何使用 min.css 使文本区域填充整个列

Question

我正在 https://shinkarom.github.io/reverser/上创建一个基本的文本反向器(源代码是 https://github.com/shinkarom/reverser(。对于CSS框架，我正在使用 http://mincss.com。

反向器分为两列。左边有文本区域。右边有反转的文字。

不幸的是，文本区域太小，无法填充整个列。给它width: 100%;height: 100%; box-sizing:border-box解决了宽度问题，但高度还是太小了。

作为一种解决方法，我尝试为 textarea 提供 25 行，但在较小的浏览器窗口中看起来非常丑陋。

以下是相关代码：

<div class="row">
<div class="col c6">
<textarea id="text" class="smooth" style="width: 100%;height: 100%; 
box-sizing:border-box;resize:none"></textarea>
</div>
<div class="col c6">   
<div id="result"> </div>
</div>
</div>  

如何使文本区域填充整个高度？

Answer 1

如果您希望文本区域占据页面的完整高度，请放置height:100vh而不是 100%。 除非父div 指定了静态高度，否则无法应用height:100%。

<div class="row">
<div class="col c6">
<textarea id="text" class="smooth" style="width: 100%;height: 100vh; 
box-sizing:border-box;resize:none"></textarea>
</div>
<div class="col c6">   
<div id="result"> </div>
</div>
</div>