为何我的footer div无法占满100%宽度？排查后问题仍未解决

你的问题出在盒模型计算逻辑和样式继承冲突上，具体原因及修复方案如下：

问题根源 #

• #boxc同时继承了.box类的样式，.box中设置的border-width:12px会叠加在你给#boxc设置的width:100%之上。默认盒模型（box-sizing: content-box）下，width:100%仅计算内容区宽度，加上左右各12px的边框后，元素总宽度会超出视口，导致视觉上无法铺满全屏。
• .box类的display:inline-block对固定定位元素无意义，反而可能引入不必要的布局干扰。

修复方案 #

修改#boxc的CSS样式，重置冲突属性并调整盒模型规则：

.box {
  background-color: aqua;
  border-width: 12px;
  border-color: black;
  height: 110px;
  width: 190px;
  display: inline-block;
  border-style: solid;
}

#boxc {
  position: fixed;
  bottom: 0px;
  width: 100%;
  /* 重置继承的inline-block属性，恢复块级布局 */
  display: block;
  /* 让边框纳入宽度计算，避免超出视口 */
  box-sizing: border-box;
  /* 彻底消除左右间隙，比单独设width更稳妥 */
  left: 0;
  right: 0;
}

同时修正HTML中未闭合的标签：

<div class="box"></div>
<div class="box" id="boxb"></div>
<div class="box"></div>
<div class="box" id="boxc"></div>

额外说明 #

box-sizing: border-box是解决问题的核心：它会将边框、内边距都包含在元素的width/height计算范围内，确保设置的100%宽度是元素的实际总宽度，不会出现超出视口的情况。

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