Question

我正在尝试编写类似于SO的布局。

它有一个带有典型块的居中容器：标题，导航，内容区域和页脚。这个块具有不同的背景颜色。问题是，我希望背景是屏幕宽度的100％。你可以在屏幕顶部的SO用户栏中看到这一点。

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

enter image description here

我已经检查了SO的html源代码，但它没有告诉我任何内容

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

有没有更好的方法来制作它？

Answer 1

我最终得到了这种结构：

<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;
}

谢谢大家。

Answer 2

我在这样的情况下做的是用主要背景颜色的html或主体样式（你的内容的样式），然后将页眉和页脚保持在主包装之外并根据需要调整其内容的大小，所以我最终得到类似的东西（我认为这与你所说的相似，但有一些细微差别）：

<body style="background: #000;">
    <div id="header" style="width: 100%; background: #666;">
      <div id="nav" style="width: 100%; background: #999;">
        <ul class="navigation" style="width: 950px; margin: 0 auto;">
        </ul>
      </div>
    </div>
    <div id="contentWrap" style="width: 950px; margin: 0 auto;">
      Whatever content stuff, other divs, etc.
    </div>
    <div id="footer" style="width: 100%; background: #999;">
    </div>
</body>

如果你的页眉和页脚中只有几个块级元素，那么你真的不需要额外的包装器，所以你最终会得到大约相同数量的div，就像你在一个包装器中拥有它们一样。如果将它们放入一个具有该大小的CSS调用中，您也可以保持它们的大小同步。它可能会牺牲一点CSS效率，但根据我的经验，这是一个足够小的权衡，它不值得失眠，因为这个网站足够小，无关紧要，或者足够大，在图像，javascript和服务器端代码等地方，效率会有所提高。

中心固定宽度布局，全屏宽度背景

2 个答案: