如何修复固定在页面底部的footer向右水平偏移的问题

错误原因 #

1. 盒模型计算规则冲突：浏览器默认使用content-box盒模型，此时你给footer设置的width: 100%仅指代内容区域宽度，额外定义的padding: 10px、1px边框会叠加在内容宽度之外，导致footer总宽度超过视口宽度，最终出现横向溢出、视觉上向右偏移的问题。
2. 默认样式干扰：主流浏览器默认会给body元素添加8px的外边距，未重置该样式的情况下，定位元素会受该边距影响进一步加重偏移。
3. 定位属性缺省：绝对定位元素未显式声明left属性，不同浏览器的默认定位基点存在差异，也可能诱发偏移。

修复方案 #

方案1：footer始终固定在视口底部（滚动页面时保持可见） #

先全局统一盒模型、重置默认边距，再调整footer的定位属性：

/* 全局基础重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    border: 1px solid;
}

方案2：footer固定在页面最底部（内容不足一屏时停在视口底部，内容超出一屏时跟随内容在末尾） #

使用flex布局实现，兼容性好且不需要定位属性：

1. 新增全局样式：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.main-content {
  flex: 1;
}

2. 调整HTML结构，把正文内容套入main-content容器：

<body>
  <div class="main-content">
    <h1> Home </h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <footer id="footer">
      Foo Bar Baz
  </footer>
</body>

3. 调整footer样式，不需要定位属性：

#footer {
    width: 100%;
    padding: 10px;
    border: 1px solid;
}

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