外部div屏幕取决于分辨率，内部div固定宽度居中。

Question

我正在尝试做一个站点，它的顶部有一个标题和菜单，这是两个彩色背景，不管屏幕的分辨率如何，但是我希望内容本身--标志、菜单项等等--居中，当然，宽度不超过1024像素，当然是相同颜色的背景，所以它显示为2行的内容。下面将是空白和内容，我希望是1024像素居中。我不知道如何做到这一点，好像我的div去100%，内部div不会中心固定。我知道这是基本的，但我还没有掌握css，并试图避免表，我包括一个图片，以防我解释的方式是没有意义的。不想让线条看起来像坚实的颜色贯穿在外面。任何帮助都将不胜感激。http://i.stack.imgur.com/yUc70.png

Answer 1

试试这把小提琴：

jsfiddle.net/P9jg6/2/

对于全屏输出：

jsfiddle.net/P9jg6/2/show/

Answer 2

您可以使用几个嵌套的div，外部的提供整个宽度的背景和颜色，内部提供内容、宽度和对中的内容。

<div class="header">
    <div class="content">Header</div>
</div>
<div class="menu">
    <div class="content">Menu</div>
</div>
<div class="main">
    <div class="content">Content</div>
</div>

.content {
    max-width: 300px;
    margin: 0 auto;
    padding: 5px;
}
.header {
    background-color: olive;
    color: darkred;
}
.header .content {
    border-left: 2px solid darkred;
    border-right: 2px solid darkred;
}
/* same for menu, main */

全JSFiddle

更新：

若要删除网页周围的空白，必须删除页边距。

body {
    margin: 0;
}

改性JSFiddle

Answer 3

我宁愿使用:前和后伪类作为两个背景绝对定位。

例：

body{}
body::before{ content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px; background: #F00; }
body::after{ content: ''; position: absolute; left: 0; right: 0; top: 30px; height: 10px; background: #0F0; }

当然，如果你需要这些条纹的可变高度，它就不能工作了。然后，您必须在其中创建带包装器的条(stripe = background，wrapper =中心化的内容)。