设置width:100%的footer（页脚）左右两侧存在间隙问题求助

你遇到的页脚无法铺满视口的问题是由以下3个错误共同导致的：

• HTML标签未闭合：代码中的.wrapper、.center、.buttons三个div均缺失结束标签，浏览器解析时会自动将footer元素嵌套进未闭合的上层容器中，导致footer设置的width: 100%是相对于上层容器宽度而非视口宽度，自然无法铺满全屏。
• footer定位规则错误：你给footer设置了position: absolute但未指定left/right偏移值，部分浏览器会自动基于最近的非静态定位父元素的内边距位置计算宽度，就算设置了100%宽度也会出现左右间隙。
• 盒模型缺失全局配置：你没有设置全局box-sizing: border-box规则，footer的padding属性会额外撑大元素宽度，可能导致出现横向滚动条。

1. 补全所有缺失的HTML闭合标签，保证footer不会被嵌套进其他容器中
2. 修改footer的定位属性，删除不合理的绝对定位配置
3. 新增全局盒模型规则，避免内边距撑宽元素

HTML部分 #

<!-- 原来的buttons、center、wrapper均未闭合，补全后如下 -->
<div class="buttons">
  <button>Explore more</button>
  <button class="btn">Contact me</button>
</div>
</div>
</div>
<!-- 确保footer放在wrapper闭合标签之后，不被其他容器包裹 -->

<!-- Begin Footer -->
<footer>
    <div class="footer-content">
        <h3>Moritz </h3>
        <p>Thank you for browsing. I hope to hear from you soon!</p>
    <ul class="socials">
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
        <li><a href="#"><i class="fa fa-envelope"></i></a></li>
        <li><a href="#"><i class="fa fa-phone"></i></a></li>
    </ul>
    </div>
    <div class="footer-bottom">
        <p> Copyright &copy; 2021 Moritz </p>
    </div>
</footer>
<!-- End Footer -->

CSS部分 #

/* 全局选择器新增盒模型配置 */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* 修改footer的定位规则 */
footer{
    position: relative;
    left: 0;
    background-color: #808080;
    height: auto;
    width: 100%;
    padding-top: 40px;
    color: black;
}

如果需要让footer固定在页面最底部，后续可以改为使用flex弹性盒的sticky footer方案，适配不同高度的页面内容。

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