网站三栏（15%+70%+15%）布局无法占满100%宽度求助

以下是几个大概率导致问题的原因，你可以逐一排查：

• 父容器宽度未拉满：如果三栏嵌套在某个父容器（比如body、包含导航栏的外层div）里，这个父容器默认可能不是100%宽度。检查父容器的CSS，确保设置了width: 100%或者width: 100vw，否则子元素的百分比宽度会受限于父容器的实际宽度。如果导航栏是父容器的一部分，导航栏的宽度设置（比如固定宽度、未拉满）会直接影响整个父容器的可用宽度。

• 盒模型未统一设置：即使你确认没有额外padding和margin，也要检查是否开启了box-sizing: border-box。默认的content-box盒模型中，元素的宽度仅计算内容区，若后续给元素加了边框，总宽度会超出设置的百分比，导致三栏总宽度超过100%被换行，或者视觉上没占满。建议给全局元素设置：

* {
  box-sizing: border-box;
}

这样元素的padding、border都会包含在设置的宽度内，避免宽度溢出。

• 导航栏的布局冲突：如果导航栏使用了浮动、绝对定位，可能导致父容器高度塌陷，或者后续的三栏容器的宽度计算异常。比如导航栏用了float: left但未清除浮动，父容器的高度会变成0，子元素的宽度渲染就会出现问题。检查导航栏的CSS，看是否需要添加清除浮动的样式（比如在导航栏后加clear: both的元素，或者给父容器设overflow: auto）。

• 浏览器默认样式干扰：大部分浏览器会给body元素默认添加8px左右的margin，这会导致页面内容和浏览器边缘有间隙，看起来像是三栏没占满100%。可以直接重置body的默认样式：

body {
  margin: 0;
}

• 百分比精度误差：部分浏览器对百分比宽度的像素取整会有误差，15%+70%+15%理论上是100%，但实际渲染可能因为像素精度问题少1px。这种情况推荐改用flex布局替代固定百分比：

/* 父容器样式 */
.container {
  display: flex;
  width: 100%;
}
/* 左右栏 */
.sidebar {
  flex: 0 0 15%;
}
/* 中间栏 */
.main-content {
  flex: 1;
}

flex布局会自动让中间栏填充剩余空间，彻底避免百分比计算的精度问题。

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