如何使用 min.css 使 textarea 填充整个列

Question

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

反向器分为两列。左边的有textarea。右边的文字是颠倒的。

很遗憾，textarea 太小，无法填满整列。给它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>  

如何让textarea填满整个高度？

Answer 1

如果您希望 textarea 占据页面的整个高度，请输入 height:100vh 而不是 100%。 height:100% 无法应用，除非您的父 div 已指定静态高度。

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