精准控制textarea尺寸

马黑黑 · 发表于 2026-3-24 20:25

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

一般而言，为规范<textarea> 的尺寸，最常见的方法是给它一个父元素，父元素设置宽高，多行文本框使用100%宽高值。

<textarea> 元素用于创建多行纯文本输入控件，常用做Web页内嵌文本编辑器，也常用于评论、反馈等需要大量文字输入的场景。它支持多种属性来控制外观、行为和验证规则。

试看如下代码：

<style>
    .outerDiv {
        margin: 20px auto;
        width: 640px;
        height: 360px;
        border: 1px  solid red; /* 观察边界之用 */
    }
    .outerDiv textarea {
        width: 100%;
        height: 100%;
        /* 下面是核心 : 让文本框宽高严格等于父元素的宽高（后同）*/
        /* box-sizing: border-box; */
    }
</style>

<div class="outerDiv">
    <textarea></textarea>
</div>

观察运行效果会发现：多行文本框右、下超越了父元素的边界。这是因为，<textarea> 元素默认的 box-sizing 属性值为 content-box，解开 border-box 便可可改变这种状况（可以在线操作）。

box-sizing 用于定义浏览器如何计算元素的总宽度和高度，是控制 CSS 盒模型行为的核心属性。默认情况下（content-box），width 和 height 仅作用于内容区域，padding 和 border 会额外增加元素的实际尺寸；而 border-box 则会将 padding 和 border 包含在设定的宽高内，更易于布局控制。

另一种方法是利用flex弹性布局加以实现。父元素使用flex布局，多行文本框设置 flex-grow 属性值为 1 即可：

<style>
    .outerDiv {
        display: flex;
        margin: 20px auto;
        width: 640px;
        height: 360px;
        border: 1px  solid red; /* 观察边界之用 */
    }
    .outerDiv textarea {
        flex-grow: 1;
        box-sizing: border-box;
    }
</style>

<div class="outerDiv">
    <textarea></textarea>
</div>

用grid网格布局也很简单：

<style>
    .outerDiv {
        display: grid;
        margin: 20px auto;
        width: 640px;
        height: 360px;
        border: 1px  solid red; /* 观察边界之用 */
    }
    .outerDiv textarea {
        box-sizing: border-box;
    }
</style>

<div class="outerDiv">
    <textarea></textarea>
</div>

☪️ 精准控制 <textarea> 的宽高不限于上述三种方法，也无需囿于上述容器包裹文本框的思路，只要一切尽在掌控中，什么实现方法都是好方法。