0

你好我有以下问题。我用宽度和高度嵌入了页脚。到目前为止，页脚还没有背景颜色。现在我认为让页脚延伸到整个宽度并赋予它背景颜色。

我的问题是，我不知道如何使页脚充满一种颜色，这种颜色很容易简单地说“repeat-x”该颜色。我是用我的背景做的body。我不能轻易地创建图像，因为主页的内容没有固定到一个高度。我也想知道如何实现这个例子的页脚将留在底部？

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

http://razzi.me/tour

希望这能说明我想要达到的目标。如果有人可以帮助我，我将不胜感激。

多谢。

4

3 回答 3

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; }
于 2012-07-16T14:09:45.093 回答
1

如果你想让页脚背景颜色扩展到窗口的 100% 宽度，它必须移出你的 mainwrapper。就像是：

<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;
}
于 2012-07-16T14:11:07.760 回答
1

要达到这种效果，您需要将页脚放在包装器之外。我通常使用这个粘性页脚。

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/

于 2012-07-16T14:11:51.940 回答