Woocommerce页脚未与FullScreen对齐

Question

我最近开发了我的第一个woocommerce网站，我遇到了一些我想解决的问题。

可以在http://www.dcsreceivers.co.uk/查看网站本身。

我目前遇到的问题是页脚栏，因为它背后的背景不会在不同的屏幕尺寸上显示边对边。当我在我的笔记本电脑（屏幕尺寸13）上开发这个时，这很好但是当我在更大的屏幕上看到这个时，这会在右侧留下一个空隙，我不知道如何解决它。

用于此的代码是：

#colophon .site-info { 
    background-color: #2c2c2c; 
    margin-left: -500px; 
    padding-left: 500px; 
    margin-right: -46px; 
    padding-right: 500px; 
    border-top: 1px solid #3A3A3A;
}

如果有人可以建议如何解决这个问题，我会很感激，因为我希望在所有屏幕尺寸上正确显示。

提前致谢。

附加到展示问题

的图片

Answer 1

你有两种可能性。您可能希望在页脚中显示黑条：

• 展开以适合屏幕的宽度;
• 适合其上方内容的宽度，而不是屏幕的宽度。

要实现第一个目标，您可以将.site-info div 置于其容器外，将div放在类col-full中。在这种情况下，代码将是：

<footer id="colophon" class="site-footer" ...>
   <div class="col-full">
      ...
   </div>
   <div class="site-info">
      ...
   </div>
</footer>

但是，在这种情况下，您必须相应地设置.site-info div的填充以调整其内容的位置。

要实现第二个目标，您只需删除保证金：

#colophon .site-info { 
   background-color: #2c2c2c; 
   padding-left: 500px; 
   padding-right: 500px; 
   border-top: 1px solid #3A3A3A;
}

Answer 2

position: absolute;
left: 0;
right: 0;

删除边距。