必须同时重置html和body的margin与padding，推荐html, body { margin: 0; padding: 0; }，并配合box-sizing: border-box及媒体元素max-width: 100%防止溢出。
body 默认 margin 导致双栏布局多出滚动条
浏览器会给 html 和 body 元素加默认 margin（通常是 8px），哪怕你只写了两栏 div 并设了 width: 50%，总宽度也会因外边距超出视口，触发横向滚动条。
解决方法很简单，但容易被忽略：
- 必须同时重置
html和body的margin与padding - 推荐写法：
html, body { margin: 0; padding: 0; } - 只写
body { margin: 0; }在某些文档类型（如 XHTML）下可能不生效
box-sizing 不一致让子元素撑宽父容器
双栏布局中，如果一栏用了 border 或 padding，而没设 box-sizing: border-box，那它的实际宽度就是 width + padding + border，轻松突破 50%。
常见错误现象：左右两栏看起来“挤不下”，右侧出现横向滚动条，但检查每个 div 宽度明明是 50%。
立即学习“前端免费学习笔记（深入）”；
实操建议：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 全局加：
* { box-sizing: border-box; }（注意：会影响所有元素，包括表单控件） - 或精准控制：
.left-col, .right-col { box-sizing: border-box; } - 图片、iframe 等媒体元素记得加
max-width: 100%; height: auto;，否则也容易溢出
flex 或 grid 布局中 min-height / height 引发的纵向滚动条
用 display: flex 或 display: grid 做双栏时，如果给容器设了 min-height: 100vh，又没处理好子项高度，很容易在内容少时也撑满全屏，再叠加 body 默认 margin，就多出纵向滚动条。
更隐蔽的问题是：100vh 在移动端 Safari 中会包含地址栏高度，页面加载后地址栏收起，100vh 实际变大，导致短暂溢出。
稳妥做法：
- 容器用
height: 100dvh（现代浏览器支持，dvh = dynamic viewport height）替代100vh - 若需兼容旧版，可用 JS 动态设置：
document.documentElement.style.height = `${window.innerHeight}px` - 避免对
body直接设height: 100vh，优先控制最外层 wrapper
伪元素或 fixed 元素意外溢出视口
双栏中某栏用了 ::before 或 ::after，或者内部有 position: fixed 的提示框、广告位，它们虽脱离文档流，但若 left/right 值过大（比如 right: -20px），仍可能导致整个页面计算宽度超标，出现横向滚动条。
排查建议：
- 打开 DevTools → Elements → 选中
html，勾选 “Show rulers” 查看是否真有内容超出视口右边界 - 临时加
* { outline: 1px solid red !important; }快速定位“看不见的溢出源” - 对可疑的
::before/::after显式加content: ""和pointer-events: none，避免干扰布局测量
真正难处理的不是怎么藏滚动条，而是哪个元素在悄悄“偷占空间”。overflow-x: hidden 是兜底手段，但一旦用了，就得确认被裁掉的部分确实无关紧要——比如一个仅用于视觉装饰的渐变边框，而不是用户必须点击的导航按钮。
