本文详解如何通过 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% 视口宽度，从而触发水平滚动或右侧内容被裁切。

✅ 正确解法是两步协同：

1. 强制启用盒模型边界包含模式
   在 #cookieAlert 上添加 box-sizing: border-box，确保 width: 100% 已涵盖 padding 与 border，避免隐式溢出。

2. 主动控制安全间距，而非依赖 align="center"
   原 HTML 中

   对 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;          /* 关键：启用边界包含模型 */
   }

   ⚠️ 注意事项：

   • 移除无意义的
     包裹层，它对 fixed 元素不生效，反而可能干扰布局上下文；
   • .right-box 中 flex: 0 已足够防止拉伸，margin-left: 10px 可保留，但需确保其内容（如按钮）自身无意外外边距；
   • 若需响应式适配，建议将 15px 替换为 clamp(10px, 2vw, 20px) 等相对单位；
   • 测试时务必在不同屏幕宽度下检查是否仍存在水平滚动条——这是溢出最直接的信号。

   通过以上调整，#cookieAlert 将严格贴合视口底部，左右留白均匀，按钮完整可见，且兼容所有现代浏览器。