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>

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

1 个答案: