向网站添加全宽彩色页脚-主包装冲突 - Add full width colour footer to site - Main wrapper conflicting

Add full width colour footer to site - Main wrapper conflicting

我想在我的网站上获得一个全宽页脚，如下所示：http://www.petspyjamas.com/

我的网站上的主包装器似乎有问题，它影响了整个页面，而且似乎不允许我有全宽的页脚。

这是我的网站：http://www.purrfectlyyappy.com/如您所见，页脚区域当前为灰色。

您的页脚为100%，但innerwrapper设置为980px

尝试更改

#footer .wrapper { width:100%!important;}

至于彩色

#footer .linebottom {
background: #BDBDBD;
}

我倾向于将HTML页面分成几个部分（即页眉、主页、页脚），然后在每个部分中都有容器。这样，我可以将背景颜色/图像应用于部分，并且仍然将内容限制在特定的宽度内。示例：

<html>
  <body>
    <header class="site-header" role="banner">
      <div class="container">
        <!-- branding, navigation etc. -->
      </div>
    </header>
    <section class="site-main" role="main">
      <div class="container">
        <!-- main content -->
      </div>
    </section>
    <footer class="site-footer" role="contentinfo">
      <div class="container">
        <!-- copyright notice, navigation etc -->
      </div>
    </footer>
  </body>
</html>

因此，要在页脚上应用颜色填充，您可以添加一个简单的CSS规则：

.site-footer {
  color: #ccc;
  background-color: #333;
}