如何：创建100％宽度页眉/页脚中心的内容

原本写了一个关于如何“创建全宽页眉和页脚”的教程，年前，当我在我网站上的许多地方重新设计后页面上之一的工作中心的内容，使用CSS内容的教程来做。两种方法的工作，既可以使用，但我觉

得我目前的方法一点点的“清洁工”。

我想解释为什么你可以选择这样做。通常情况下，你会选择创建一个单独的头和页脚全宽，因为你有一个背景，并且是水平平铺，但是跟你的主要内容背景不同。这是只有一个方法，如果你需要单独

的页眉和页脚的话。

在我的例子中，我是定义一个空的头<DIV>全宽背景，然后定位在它的使用负的值来定义中心内容。我相信在当时，这是唯一的办法，我决定使用两个单独的图像，头部和内容部分的背景。

现在我要解释的方法将使用一些相同的原则，但除去空<div>和获取摆脱任何负面的利润率。而且，这种方法将你的头和页脚相同。

在我们开始之前，我们正在努力实现的一个超级简单的演示。

很简单，你的头的HTML将看起来像这样（更换你想的任何内容的标志及其他文字 - 正文的元素，标题元素等！）：

<div id="header">
    <div class="wrap">
        <div class="logo">
            <a href="#"><img src="images/yourlogo.png"></a>
        </div>
        <p>Other content for your header</p>
    </div>
</div>

footer
<div id="footer">
    <div class="wrap">
        <p>This would be your footer content!</p>
    </div>
</div>

现在的CSS
.wrap {
    position:relative;
    margin:0 auto;
    /*replace 900px with your width*/
    width:900px;
}

#header, #footer {
    width:100%;
    float:left;
}

真的就这么简单!