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

I'm trying to code a layout somewhat similar to SO.

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

It has a centered container with typical blocks: header, navigation, content area and footer. This blocks have different background-color. The problem is, I want the background to be 100% of the screen width. You can see this in SO's userbar at the top of the screen.

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

Also I made an example picture. Note, that there shouldn't be any vertical borders, they're just to show the content area.

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

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

I've checked SO's html source but it didn't tell me anything

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

So, what are my options? My first idea was to make a wrapper div for each section which handles the background, and another content div inside of it with width:950px and margin:0 auto But it seems to me very inefficient.

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

Is there a nicer way to make it?

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

2 个解决方案

#1

I've ended up with this structure:

我最终得到了这个结构：

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

and the style looks like

和风格看起来像

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

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

Thanks everyone.

感谢大家。

#2

What I do in cases like that is style the html or body with the main background color (the one for your content), then keep the header and footer out of the main wrapper and size down their contents as needed, so I'd end up with something like so (which I think is similar to what you're saying you did, but with a couple minor differences):

我在这样的情况下做的是样式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>

You don't really need extra wrappers if you have only a couple block level elements in your header and footer, so you end up with about the same number of divs as if you had them all in one wrapper. You can also keep their sizes in sync if you put them in one CSS call with the size. It might sacrifice a little bit in the way of CSS efficiency, but in my experience, it's a small enough trade off that it's not worth losing sleep over, since either the site is small enough that it doesn't matter, or large enough that there are better efficiency increases in places like the images, javascript, and server-side code.

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

#1

I've ended up with this structure:

我最终得到了这个结构：

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

and the style looks like

和风格看起来像

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

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

Thanks everyone.

感谢大家。

#2

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

秒客网

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

2 个解决方案

#1

#2

#1

#2

相关文章