Question

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

我的网站上的主要包装器似乎存在问题，这会影响整个页面，并且似乎没有让我的页脚全宽。

这是我的网站：http://www.purrfectlyyappy.com/，因为您可以看到页脚区域目前为灰色。

Answer 1

您的页脚是100％，但内部包装器设置为980px

尝试更改

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

颜色

#footer .linebottom {
background: #BDBDBD;
}

Answer 2

我倾向于将我的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;
}

添加全宽颜色页脚到站点 - 主包装器冲突

2 个答案: