ElementPlus input.textarea 如何撑满整个盒子？

elementplus input.textarea如何撑满整个盒子？

使用input.textarea时，有些情况下需要让其高度撑满整个盒子，这时该怎么做呢？

解决方案：

1. 使用行数rows属性：

   为textarea设置rows属性，指定其行数。例如：

   <el-input v-model="dir.content" type="textarea" rows="6" placeholder="请输入aaa.css文件内容"></el-input>

   登录后复制

2. 设置高度height和最小高度min-height：

   直接设置textarea的高度或最小高度，例如：

   <el-input v-model="dir.content" type="textarea" style="height: 100px; min-height: 100px" placeholder="请输入aaa.css文件内容"></el-input>

   登录后复制

3. 使用css flex布局：

   将textarea的父容器设置为flex布局，并将textarea设置为flex-1，使textarea占据父容器剩余的所有空间。例如：

   <div class="flex-contAIner">   <el-input v-model="dir.content" type="textarea" placeholder="请输入aaa.css文件内容"></el-input> </div>  <style>   .flex-container {     display: flex;     height: 100%;   }    textarea {     flex: 1;   } </style>

   登录后复制