Css 带全屏宽度背景的居中固定宽度布局_Css_Layout_Html

Css 带全屏宽度背景的居中固定宽度布局

css layout html

Css 带全屏宽度背景的居中固定宽度布局,css,layout,html,Css,Layout,Html,我正在尝试编写一个类似于这样的布局它有一个中心容器，其中包含典型的块：页眉、导航、内容区域和页脚。这些块具有不同的背景色。问题是，我希望背景是屏幕宽度的100%。您可以在屏幕顶部的SO用户栏中看到这一点我还制作了一个示例图片。请注意，不应该有任何垂直边框，它们只是显示内容区域我检查了SO的html源代码，但它没有告诉我任何事情那么，我的选择是什么？我的第一个想法是为处理背景的每个部分创建一个包装器div，并在其中创建另一个内容div，宽度为950px，边距为0 auto 但在我看来

我正在尝试编写一个类似于这样的布局

它有一个中心容器，其中包含典型的块：页眉、导航、内容区域和页脚。这些块具有不同的背景色。问题是，我希望背景是屏幕宽度的100%。您可以在屏幕顶部的SO用户栏中看到这一点

我还制作了一个示例图片。请注意，不应该有任何垂直边框，它们只是显示内容区域

我检查了SO的html源代码，但它没有告诉我任何事情

那么，我的选择是什么？我的第一个想法是为处理背景的每个部分创建一个包装器div，并在其中创建另一个内容div，宽度为950px，边距为0 auto 但在我看来，这是非常低效的

有更好的方法吗？

在这种情况下，我所做的是使用主背景颜色（用于内容的颜色）设置html或正文的样式，然后将页眉和页脚放在主包装之外，并根据需要缩小其内容的大小，这样我就可以得到这样的结果（我认为这与你所说的相似，但有一些细微的区别）：




任何内容的东西，其他部门，等等。

如果页眉和页脚中只有两个块级元素，那么实际上不需要额外的包装器，因此最终得到的div数与在一个包装器中得到的div数大致相同。如果将它们与大小放在一个CSS调用中，还可以保持大小同步。这可能会牺牲一点CSS效率，但根据我的经验，这是一个很小的折衷，不值得再睡一觉，因为要么网站小到无关紧要，要么网站大到可以在图像、javascript和服务器端代码等地方提高效率。

我最终采用了这种结构：

<body>
    <div id="header">
        <div id="logo-container" class="wrap">
            <div>...</div>
        </div>
        <div id="navigation" class="wrap">
            <div>...</div>
        </div>
    </div>
    ...
<body>

谢谢大家。

实际上，如果你看<代码>标题> <代码>和<代码>内容>代码>这正是他们所使用的方法。我不喜欢额外的标记，对于那个拉伸的背景，这是我所发现的最干净和最适合浏览器的方式。考虑使用GRSS CSS系统，谢谢大家。1。。我第一次没有注意到#custom标题。嗯，这不适合我的需要。2.谢谢，我想，这将是我的选择。3.我以前使用过blueprint。我还不确定我是否要在这个项目中使用网格。谢谢你的提示。你的解决方案看起来很像，但我可能在内容区域中还有一些应该使用的块有100%的背景。否则，我会按照你的方式来做。@Bassney:你说的在内容中增加几个100%背景的块是什么意思？比如说，增加视口的宽度，或者填充它们的容器？基本上，对于我所做的设计，不需要太多增加视口的宽度，但什么只是从包装器中取出（或者，你可以不用包装器，只使用我发布的相同技术），或者看看你的全幅元素是否有相同的背景，只使用它作为主体背景。当然，这一切都取决于具体的设计（没有包装，我有点盲目）。

<body>
    <div id="header">
        <div id="logo-container" class="wrap">
            <div>...</div>
        </div>
        <div id="navigation" class="wrap">
            <div>...</div>
        </div>
    </div>
    ...
<body>

#... {
    background:#...
}

.wrap div {
    width:950px;
    margin:0 auto;
}