本文详解如何通过 box-sizing: border-box 和精确的宽高计算，解决 CSS position: fixed; bottom 元素因边框和内边距导致的右侧裁切、左右不对齐问题。
本文详解如何通过 `box-sizing: border-box` 和精确的宽高计算，解决 css `position: fixed; bottom` 元素因边框和内边距导致的右侧裁切、左右不对齐问题。
在使用 position: fixed; bottom: 5px; width: 100% 创建底部悬浮提示栏（如 Cookie 告知栏）时，开发者常遇到一个典型布局陷阱：视觉上元素“超出视口右边界”或“左侧留白、右侧被截断”。根本原因在于 CSS 默认的 box-sizing: content-box —— 此时 width: 100% 仅指内容区宽度，而 padding（如 15px）和 border（如 10px solid #111）会额外叠加，导致总宽度远超 100% 视口宽度，从而触发水平滚动或右侧内容被裁切。
✅ 正确解法是两步协同：
强制启用盒模型边界包含模式
在 #cookieAlert 上添加 box-sizing: border-box，确保 width: 100% 已涵盖 padding 与 border，避免隐式溢出。-
主动控制安全间距，而非依赖 align="center"
原 HTML 中 <div align="center"> 对 fixed 元素无效（fixed 脱离文档流，不受父级文本对齐影响）。应改用 left + width 精确控制水平位置。例如，若需左右各留 15px 安全边距，则设：left: 15px; width: calc(100% - 30px); /* 15px × 2 */
完整修正后的 CSS 如下：
#cookieAlert {
position: fixed;
bottom: 5px;
left: 15px; /* 左侧起始位置 */
width: calc(100% - 30px); /* 扣除左右边距后可用宽度 */
background-color: rgba(0, 0, 0, 0.9);
border-top: 10px solid #f8f8f8;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px; /* 内边距 now included in width */
border: 10px solid #111; /* 边框 now included in width */
z-index: 10000;
box-sizing: border-box; /* 关键：启用边界包含模型 */
}⚠️ 注意事项：
- 移除无意义的 <div align="center"> 包裹层，它对 fixed 元素不生效，反而可能干扰布局上下文；
- .right-box 中 flex: 0 已足够防止拉伸，margin-left: 10px 可保留，但需确保其内容（如按钮）自身无意外外边距；
- 若需响应式适配，建议将 15px 替换为 clamp(10px, 2vw, 20px) 等相对单位；
- 测试时务必在不同屏幕宽度下检查是否仍存在水平滚动条——这是溢出最直接的信号。
通过以上调整，#cookieAlert 将严格贴合视口底部，左右留白均匀，按钮完整可见，且兼容所有现代浏览器。
