html - Woocommerce 页脚未与全屏对齐

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的class是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;
}