CSS的bottom属性表现异常：左侧留间隙、右侧按钮被截断

问题根源分析 #

你的布局问题主要来自三个点：

1. 盒模型计算错误：默认box-sizing: content-box下，width:100%只计算内容宽度，加上padding:15px和border:10px后，元素总宽度会超过视口，导致右侧按钮被截断。
2. 多余的居中容器干扰：外层<div align="center">的text-align:center属性会影响固定定位元素的对齐，加上你没给固定定位元素设置left:0，导致左侧出现间隙。
3. Flex属性使用不当：right-box的flex:0写法不够准确，应该用flex-shrink:0防止按钮被压缩。

修改后的完整代码 #

CSS部分

#cookieAlert {
  position: fixed;
  bottom: 5px;
  left: 0; /* 强制从视口左侧开始 */
  width: 100%;
  box-sizing: border-box; /* 让padding和border包含在width内 */
  background-color: rgba(0, 0, 0, 0.9);
  border: 10px solid #111;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  z-index: 10000;
}

.left-box {
  flex: 1;
  color: #f8f8f8;
  margin-right: 15px; /* 给文本和按钮之间留足够间距 */
}

.right-box {
  flex-shrink: 0; /* 防止按钮被压缩 */
}

.preen {
  color: #f8f8f8;
  text-decoration: underline;
}

.ok-button {
  padding: 8px 16px;
  cursor: pointer;
}

HTML部分

<div id="cookieAlert">
  <div class="left-box">
    <div>This website uses cookies for functionality, analytics and advertising purposes as described in our <a href="" target="_blank" class="preen">Privacy Policy</a>.</div>
  </div>
  <div class="right-box">
    <button class="ok-button" id="acceptButton" data-id="5395">OK</button>
  </div>
</div>

关键修改说明 #

• box-sizing: border-box：彻底解决宽度溢出问题，让元素的padding和border都包含在设置的width:100%内。
• left:0：固定定位元素默认不会自动对齐视口左侧，加上这个属性消除左侧间隙。
• 移除外层<div align="center">：固定定位元素脱离文档流，这个容器不仅没用，还会干扰布局对齐。
• flex-shrink:0：确保按钮不会因为左侧文本过多而被压缩或截断。
• 增加margin-right：给文本和按钮之间添加合适间距，避免小屏幕下两者挤在一起。

内容的提问来源于stack exchange，提问作者Rodnee