Question

我正在尝试建立一个顶部有标题和菜单的网站，它是2个彩色背景，无论显示器分辨率如何，都会扩展屏幕的整个宽度，但我想要内容本身Logo，菜单项等。要居中，宽度不超过1024像素，当然具有相同的彩色背景，因此它看起来像一个实心的2行内容。在那将是白色空间和我希望以1024像素为中心的内容。我不确定如何实现这一点，好像我的div 100％内部div不会中心固定。我知道这是基本的，但我还没有掌握css，我正在试图避免表格我包括一张照片，以防我解释的方式毫无意义。不希望线条希望它显示为纯色。任何帮助将不胜感激。 http://i.stack.imgur.com/yUc70.png

Answer 1

您可以使用多个嵌套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 2

试试这个小提琴：

jsfiddle.net/P9jg6/2/

全屏输出：

jsfiddle.net/P9jg6/2/show/

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 =居中的内容）。

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

3 个答案: