为什么CSS中设置height:100%时padding会导致页面出现滚动条？-css教程-PHP中文网

height: 100% 不撑高，padding 在 content-box 下外扩导致溢出；需统一设 box-sizing: border-box，html/body 显式设高并清空 margin/padding，慎用 100vw。

为什么css中设置height:100%时padding会导致页面出现滚动条？

height: 100% 本身不撑高，但 padding 会额外加在它外面

height: 100% 只是让元素“尝试”取父容器内容区高度，它本身不会产生高度；真正导致滚动条的，是 box-sizing: content-box（浏览器默认）下，padding 和 border 会**叠加在 height 值之外**。比如父容器高 500px，子元素设 height: 100% + padding: 20px，实际总高就是 540px → 溢出触发垂直滚动条。

常见踩坑点：

没重置 box-sizing，只写了 height: 100%
父容器（如 body）本身有默认 margin 或未设 height: 100%，导致子元素的 100% 计算结果为 0
用了 height: 100vh 却又加 padding，同样受 content-box 影响

为什么 body { height: 100vh } 还是滚？

body { height: 100vh } 看似封顶，但只要子元素有 padding 或 border，且没设 box-sizing: border-box，就会突破这个“顶”。更隐蔽的是：如果 html 元素没显式设高，body 的 height: 100vh 虽生效，但它的子元素用 height: 100% 时，计算基准仍是 body 的内容区（不含 padding 和 border），而你很可能给 body 加了 padding —— 这就让子元素的 100% 实际变小，但它的 padding 却照常外扩。

正确链路应是：

html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; }
所有需撑满的子元素统一加 box-sizing: border-box;

uniapp 或移动端特别容易出问题？

是的。uniapp 的 <view></view> 默认渲染为 block 元素，继承浏览器默认 box-sizing: content-box，而很多开发者习惯写 width: 100% + padding: 20rpx，在小屏设备上，100% + padding 直接超出屏幕宽度 → 横向滚动条立刻出现。这不是 uniapp bug，是 CSS 盒模型行为。

解决只需一行：

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

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

下载

view {
  box-sizing: border-box;
}

或者全局重置（推荐）：

*,
*::before,
*::after {
  box-sizing: border-box;
}

注意：*::before 和 *::after 必须显式包含，否则伪元素仍按 content-box 渲染，可能偷偷撑宽。

滚动条宽度会让 100vw 更危险

如果你用 height: 100vh + padding，问题还只是“多出几像素”；但若混用 width: 100vw，就引入了另一个变量：滚动条宽度。Windows 下滚动条约 17px，100vw 包含它，而 document.body.clientWidth 不包含。一旦页面因内容变长而出现纵向滚动条，100vw 就比可视区域宽出那 17px → 横向滚动条自动补位。

所以：