footer无法填满浏览器宽度的问题求助（附代码）

核心问题 #

你的footer左侧空隙根源在于：

1. footer被嵌套在Bootstrap的.container容器内，该容器默认带有左右内边距，即便设置width:100%，也会受父容器内边距限制产生偏移。
2. 添加position:absolute后，元素脱离文档流但未指定left:0，仍保持原容器内的偏移位置，导致左侧残留空隙。

修复步骤 #

1. 调整HTML结构

将footer从#main-content的.container中移出，作为<body>的直接子元素，彻底摆脱父容器内边距的影响：

<!-- 修改前 -->
<div id="main-content" class="container">
  ... <!-- 页面内容 -->
  <footer class="panel-footer">...</footer>
</div>

<!-- 修改后 -->
<div id="main-content" class="container">
  ... <!-- 页面内容 -->
</div>
<footer class="panel-footer">
  <div id="footi" class="container">
    ... <!-- footer内部内容 -->
  </div>
</footer>

2. 修正CSS样式

移除position:absolute（若无需固定footer），补充全局样式清零和盒模型设置：

/* 清除浏览器默认的margin/padding */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
}

.panel-footer {
  margin-top: 30px;
  padding-top: 35px;
  padding-bottom: 30px;
  background-color: #222;
  border-top: 0;
  width: 100%;
  box-sizing: border-box; /* 确保padding不会让footer宽度超出100% */
}

（可选）固定footer在页面底部

如果需要footer始终显示在窗口底部，修改CSS为：

.panel-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  margin-top: 0; /* 固定底部无需margin-top */
  padding-top: 35px;
  padding-bottom: 30px;
  background-color: #222;
  border-top: 0;
  box-sizing: border-box;
}

/* 给主内容添加底部内边距，避免被固定footer遮挡 */
#main-content {
  padding-bottom: 120px; /* 值需大于footer实际高度 */
}

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