Question

我正在网站上工作，并且认为我会看到是否有更好的方法来获得相同的结果。

问题：该页面由多个部分组成，每个部分都有自己的背景，应该是浏览器的整个宽度。每个部分内容以960px为中心。目前，我正在将每个部分包装成一个看似不确定的包装纸。有没有人有更好的解决方案？

示例代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Problem Example</title>

<style>
    .content{
        width:960px;
        margin: 0 auto;
        padding: 90px 0;
        background: rgba(0,0,0,0.5);
    }

    #header_wrapper{
        background: red
    }

    #content_wrapper{
        background: green
    }

    #footer_wrapper{
        background: yellow
    }
</style>
</head>

<body>
<div id="header_wrapper">
    <div class="content">
        Header Content
    </div>
</div>
<div id="content_wrapper">
    <div class="content">
        Content Content
    </div>
</div>
<div id="footer_wrapper">
    <div class="content">
        Footer Content
    </div>
</div>
</body> 
</html>

理想的解决方案：相同的页面，但没有3个额外的包装div。

建议任何人？

Answer 1

如果你想拥有动态高度，而不是使用bg的图像，我认为这是最好的做法

Answer 2

您的要求是矛盾的。

您指定三个部分中的每一个都应跨越页面的整个宽度（并包含不同的背景），但每个部分的内容必须限制为960px。单个div不能同时具有100％宽度和960px宽度。如果没有折叠的div，你就无法实现一些JavaScript魔法，你不能实现这一点。

Answer 3

这样的东西？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Problem Example</title>

<style>
    .section{
        width:960px;
        margin: 0 auto;
        padding: 90px 0;
        background: rgba(0,0,0,0.5);
    }

    .header  {background: red   }
    .content {background: green }
    .footer  {background: yellow}

</style>
</head>

<body>
<div class="header section">
    Header Content
</div>
<div class="content section">
    Content Content
</div>
<div class="footer section">
    Footer Content
</div>
</body> 
</html>

Answer 4

您已经拥有的功能很强大，或许可以选择移除content区域的包装div并将其设置在body上。轻微的节省，但它少一个div。

Answer 5

一种可行的方法是使用伪元素（：before，：after）将背景添加到具有固定宽度的容器的左侧和右侧。这适用于简单的背景，但如果您想要更复杂的背景图像，则可能会变得更加棘手。

要了解有关此技术的更多信息，请在csstricks上查看this post。

Answer 6

我不知道这个问题仍然有多相关，但正如我刚刚搜索到的那样，我发现了这个问题，可能仍然会有人对此感兴趣。

稍微修补一下，我实际上得到了它的工作，我想提出我的解决方案。

<main>
    [your content here]
</main>

main {
    background: red;
    position: relative;
    width: 1000px;
    margin: 0 auto;
}

main::before {
    background: blue;
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -50vw;
    right: -50vw;
    z-index: -1;
}

如果需要，同样适用于:: after元素。

基本上我正在做的是创建一个与父级相同高度的伪元素（但你可以用负值使其更大）并根据视口宽度使用超大宽度的方式。它不是基于百分比，因为百分比与<main>元素相关。如果您需要支持旧版浏览器，可以使用百分比，但是您需要为自己找出一个数字。然后在父元素后面放一层让它保持可见。

虽然存在一个轻微的缺点，但实际上并不相关。使用这种方法，主体（或任何元素是<main> /您的元素的父元素）获得水平滚动条，因为伪元素实际上大于视口。您可以轻松地在身体上使用overflow-x: hidden来抑制此问题，这无论如何都不会在居中的布局上造成任何问题。我认为在一个居中的布局中，永远不应该有一个实际需要水平溢出的点。

我认为如果你要使用浮动社交按钮，这也适用（我没有尝试过，因为我不是它的粉丝），因为它们应该相对于视口，而不是实际尺寸。

我不知道这个解决方案如何在性能方面发挥作用，因为我现在还不知道渲染引擎是如何工作的。曾经有一段时间，屏幕外的所有内容都被渲染出来（因此，臭名昭着的元素隐藏技术为什么能够真正快速地进入垃圾桶），但这一天不管怎样都不成问题。

全宽背景，没有包装

6 个答案: