Question

我正在努力采用最有效和最正确的方法。很像堆栈溢出的设计。我想要一个标题，标题的背景颜色在整个页面上延伸，但标题的内容和主体的内容是居中和固定的。

这是我到目前为止的代码：http://jsfiddle.net/spadez/kYfNB/13/

HTML

  <div id="container">
    <div id="header">
        <h1><a href="index.html">Admin</a></h1>
        <ul>
            <li><a href="jobs.html">Item</a></li>
            <li><a href="sites.html">Item</a></li>
            <li><a href="feeds.html">Item</a></li>
        </ul>
    </div>
    <div id="content">
         <h1>Add</h1>
    </div>
</div>

CSS

* {
    padding: 0px;
    margin: 0px;
    border: 0px;
    font-family: Helvetica, Arial;
    font-size: 13px;
    text-decoration:none;
}
ul {
    list-style-type: none;
}
#header {
    background-color:#1ABC9C;
    overflow:auto;
}
#header a {
    color: white;
    padding: 15px 20px;
    background-color: #16AD8F;
    display: block;
    margin-right: 1px;
}
#header a:hover {
    background-color: black;
}
#header h1, #header ul, #header ul li {
    float:left;
}
#content {
    background-color:#EEEEEE;
}
#container {
    width: 600px;
}

Answer 1

通过向元素添加margin: 0 auto;，它将位于父元素的中心，可以在整个页面上延伸。
您需要将标题部分拆分为内容部分。并使用单独的容器元素（在我的示例中称为.inner），它们居中并具有所需的宽度你可以将整个页面的内容围绕内部（我使用你的#container元素）放在页面上并应用bgcolor。

这样的事情：

CSS

...
.inner {
    width: 600px;
    margin: 0 auto;
}
#container {
    width: 100%;
    background-color:#1ABC9C;
}

HTML

<div id="container">
    <div id="header" class="inner">
        <h1><a href="index.html">Admin</a></h1>
        <ul>
            <li><a href="jobs.html">Item</a></li>
            <li><a href="sites.html">Item</a></li>
            <li><a href="feeds.html">Item</a></li>
        </ul>
    </div>
</div>
<div id="content" class="inner">
     <h1>Add</h1>
</div>

流体背景集中固定内容

1 个答案:

DEMO