Question

您好我有以下问题。我用宽度和高度嵌入了我的页脚。到目前为止，页脚没有背景颜色。现在我认为将页脚伸展整个宽度并赋予其背景色。

我的问题是，我不知道如何让这个页脚充满一种颜色，很容易简单地说“reapeat-x”那种颜色。我是以背景body完成的。我无法轻松创建图像，因为主页面的内容未固定到一个高度。我也想知道如何意识到这个例子的页脚将保持在底部？

我找到了一个示例，当您在此页面上调整解决方案大小时，您可以看到我的意思：

希望这能说明我想要实现的目标。如果有人可以帮助我，我真的很感激。

非常感谢。

Answer 1

我完全不知道您的代码中有哪种布局，但如果您想要全宽页脚和内容为960px，您可以将布局设置为：

<body>
   <div id="header">

       <div class="wrapper">

       </div>

   </div>

   <div id="container" class="wrapper">

       //your container with 960px width

   </div>

   <div id="footer">

       <div class="wrapper">

       </div>

   </div>
</body>
<!-- I suggested to have a wrapper in header and footer so that
     your text or links or whatever you have could be in 960px width
     but your header and footer backgrounds spawns to full-width
-->

并且CSS将是：

body { width:100% }

#header, #footer { width:100% }

.wrapper { width:960px }

#footer { clear:both; height:100px; bottom:0; display:block; background-color:#555; }

Answer 2

如果要将页脚背景颜色扩展到窗口宽度的100％，则必须将其移出主包装器。类似的东西：

<div id="mainwrapper">
    stuff goes here
</div>
<div id="footerwrapper">
    <footer>
      Stuff goes here
    </footer>
</div>

然后，在CSS中：

#mainwrapper {
    width: 960px;
    margin: 0 auto;
}

#footerwrapper {
    background-color: blue /* or whatever */;
}

footer {
    width: 960px;
    margin: 0 auto;
}

Answer 3

要实现此效果，您需要将页脚放在包装器外面。我通常使用此sticky footer。

<强> HTML

<div class="wrapper">
    <div class="push"></div>
</div>
<div class="footer"></div

<强> CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;
    margin: 0 auto -50px;
    width: 960px;
}
.footer, .push {
    height: 50px;
}

.footer {
    width: 100%;
    background: blue;
}

JS小提琴：http://jsfiddle.net/3KDYX/

设置页脚宽度

3 个答案: