如何解决CSS中textarea设置padding后滚动条溢出的问题？-css教程-PHP中文网

根本原因是textarea默认box-sizing: content-box，width: 100%不包含padding和border，导致总宽度超父容器而触发横向滚动条；必须显式设置textarea { box-sizing: border-box; }，并配合width: 100%、padding和border使用。

如何解决css中textarea设置padding后滚动条溢出的问题？

textarea加padding后横向溢出滚动条

根本原因是默认 box-sizing: content-box，导致 width: 100% 只算内容区，padding 和 border 额外叠加，总宽度超父容器。浏览器会强制拉宽并触发横向滚动条。

必须显式设置 box-sizing: border-box，让 width 包含 padding 和 border：

textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  box-sizing: border-box; /* 关键 */
}

别只给父容器设 box-sizing，textarea 自身必须设
如果用了 CSS 框架（如 Bootstrap），检查是否被重置了 box-sizing，用开发者工具看 computed 值确认
移动端尤其敏感——padding 加上 viewport 缩放或字体缩放，更容易突破边界

flex 容器里 textarea 出现意外纵向滚动条

常见于 display: flex 布局中，textarea 默认是 inline-level 元素，在 flex 主轴上不自动拉伸，又因 height: 100% 计算失准，导致内容撑高后溢出。

两个关键动作缺一不可：

强制设 display: block，脱离行内上下文
配合 width: 100% + height: 100% + box-sizing: border-box

完整写法：

textarea {
  display: block;
  width: 100%;
  height: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  resize: none;
}

注意：父 flex 容器若设了 align-items: center 或 flex-direction: column，还要确认子项是否被压缩——此时需加 min-height: 0 防止 flex 项拒绝收缩。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

JS 动态调整高度时 scrollHeight 计算不准

scrollHeight 返回的是内容实际高度（含 padding，不含 border），但如果你的 CSS padding、line-height、font-size 和 JS 执行时渲染状态不一致，结果就会偏大或偏小。

调试要点：

Chrome 开发者工具里关掉 “user agent stylesheet”，再看 computed 样式，确认真实 padding 值
JS 中设置 textarea.style.height = textarea.scrollHeight + 'px' 前，先清空 style.height（避免旧值干扰）
监听 input 和 cut、paste 事件，别只绑 keyup
移动端要额外处理 focus 后键盘弹起导致视口高度变化，可加 window.visualViewport?.addEventListener('resize', ...)