如何让textarea元素完全覆盖父容器的宽高？

问题出在textarea的默认样式和盒模型设置上：它自带默认的padding、border，且默认盒模型是content-box——这时候设置width:100%、height:100%只会计算内容区域的尺寸，加上padding和border后就会超出父容器；另外代码里父容器和textarea之间的缩进空白，也会导致额外间距露出背景。

给你两个实用的解决方法：

方法一：调整盒模型+清除默认样式 #

修改textarea的样式，把盒模型改成border-box（让宽高包含padding和border），同时清除默认的padding、border，还要注意移除父容器内的空白字符（或者把textarea标签和父容器标签写在同一行）：

<div style="border: 2px red solid; background: blue;"><textarea rows="6" style="width: 100%; height: 100%; box-sizing: border-box; padding: 0; border: none;"></textarea></div>

方法二：用Flex布局（更灵活） #

给父容器设置display: flex，让textarea自动填充父容器的剩余空间，再配合盒模型调整：

<div style="border: 2px red solid; background: blue; display: flex;">
    <textarea rows="6" style="flex: 1; box-sizing: border-box; padding: 0; border: none;"></textarea>
</div>

如果需要保留textarea的边框，把border: none改成你需要的样式即可，比如border: 1px #ccc solid，同时注意盒模型的计算逻辑。

内容的提问来源于stack exchange，提问作者HelloPuppy