扩展包装纸之外的背景色

Question

I am trying to extend the background color of my nav-wrapper div or in general, my navigation area, beyond the 960px container. 我试图将我的nav-wrapper div或一般来说，我的导航区域的背景色扩展到960px容器之外。 I have tried some techniques, but nothing has appeared to be working. 我尝试了一些技巧，但似乎没有任何效果。 See attached code and JSFiddle. 请参阅随附的代码和JSFiddle。

JSFidde: Header Background Color Extend JSFidde：标题背景颜色扩展

HTML: HTML：

 <!DOCTYPE html>
<html>
<head>
    <title>Responsive 3-Line Menu</title>
    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <link type="text/javascript" src="navicon.js">
    </head>
<body>
    <!-- Start Wrapper -->
    <div class="wrapper">
        <!-- Start Navigation Wrapper -->
        <nav class="nav-wrapper">
            <a href="#" id="logo"><img src="tappery.png"/></a>
        <!-- Start Navigation Links -->
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        <!-- End Navigation Links -->
        </nav>
        <!-- End Navigation Wrapper -->

        <!-- Start Content -->
        <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet ante orci, vitae auctor risus pharetra at. Quisque gravida a massa eget hendrerit. Nulla facilisi. Ut rutrum commodo faucibus. Aenean nec libero condimentum, vehicula nisi ut, ullamcorper felis. Ut non tempus odio. Donec vulputate blandit adipiscing. Ut condimentum feugiat lacus. Morbi eget mi pulvinar, imperdiet quam non, commodo ante. Proin vel urna in quam malesuada tincidunt. Suspendisse bibendum lacinia mi, et consectetur felis. Quisque a sem vel justo condimentum scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec molestie dapibus quam, nec pharetra nisl pretium in. Fusce blandit felis vitae eros tempor, in tempor neque malesuada. Duis in dignissim sem.</p>
        </div>
        <!-- End Content -->

    </div>
    <!-- End Wrapper -->

    <script type="text/javascript">$("#nav").addClass("js").before('<div id="menu">&#9776;</div>');
    $("#menu").click(function(){
        $("#nav").slideToggle();
    });
    $(window).resize(function(){
        if(window.innerWidth > 768) {
            $("#nav").removeAttr("style");
        }
    });</script>

</body>
</html>

CSS: CSS：

    html, body {
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    background-color: #cecece;
}

.wrapper {
            top:0;
            margin-top: 0;
            width: 960px;
            margin-right: auto;
            margin-left: auto;
            background-color: #fff;
            overflow: hidden;
        }



#logo {
    width: 200px;
}

#logo img {
    width: 150px;
    height: 40px;
}

#nav {
    width: 100%;
}

#content {
    margin-top: 50px;
}


    li {

    }

    li:last-child {
        border-right:none;
    }


    li a {
        display: block;
        width:100%;
        background:#fff;
        color: #3d6430;
        font-size:1.35em;
        text-decoration: none;
        margin-top: 5px;
    }


    @media screen and (max-width: 768px) {
        .wrapper {
            width: 100%;
            overflow: hidden;
        }


        #nav {
            clear: both;
        }

        #menu {
            width:1.4em;
            display: block;
            background:#fff;
            font-size:1.35em;
            text-align: center;

            float: right;
            top:0;

        }

        #logo {
            float: none;

        }

        #nav.js {
            display: none;
            padding: 0;
        }
        ul {
            width:100%;
            list-style:none;
            height: auto;
        }
        li {
            width:100%;
            border-right:none;
            border-top: 1px solid #3d6430; 
        }
    }

    @media screen and (min-width: 768px) {

        .nav-wrapper {
            background-color: #fff repeat-x;
            width: 100%; 
            overflow: hidden;
            position: fixed;
            z-index: 100;
        }

        #nav {
            clear: both;
        }

        #logo {
           float: left;
           display: inline;
        }

        ul {
        width:100%;
        background-color: #fff;
        height: 40px;
        padding: 0;
        display: inline;

    }

    li {
        padding: 0 20px;
        float: left;
        list-style-type: none;
    }
        #menu {
            display: none;
        }
    }

Answer 1

Just set left:0; 只需left:0; to the .nav-wrapper and remove repeat-x from background color: 到.nav-wrapper并从背景色中删除repeat-x ：

.nav-wrapper {
    background-color: #fff;
    width: 100%; 
    overflow: hidden;
    position: fixed;
    left:0;
    z-index: 100;
}

Here is a FIDDLE 这里是一个FIDDLE

Answer 2

Okay, here is my answer. 好的，这是我的答案。 It's a little bit hackish but it should work...so, you can't confine it within the bounds of the wrapper, because it's limited to 960px. 它有点黑，但它应该可以工作...因此，您不能将其限制在包装器的范围内，因为它的上限为960px。 You'll need to declare something before the wrapper. 您需要在包装器之前声明一些内容。

What I would do is make a small, white image that is 1px wide and however tall your nav is. 我要做的是制作一个小的白色图像，其宽度为1px，无论您的导航栏有多高。 Then, set the background color AND image in the body: 然后，在主体中设置背景色和图像：

body{
    background-image: url('white.jpg');
    background-color: #cecece;
    background-position: left top;
    background-repeat: repeat-x;
}

There are downsides; 有缺点。 you'd have to know the exact height of your nav, and if that changes you'd need to change the image's size as well. 您必须知道导航的确切高度，如果更改了导航高度，则还需要更改图像的大小。 Let me know if that works--thank you for providing the image, it cleared up what you wanted. 让我知道这是否可行-感谢您提供图片，它清除了您想要的内容。

Answer 3

If anyone came here in hopes to extend background colors outside of Bootstrap container, this is how I solved it. 如果有人来这里希望将背景色扩展到Bootstrap容器之外，这就是我解决的方法。

Bootstrap's container will give you a centered column of content on the page. Bootstrap的容器将在页面上为您提供居中的内容列。 But what if you want to give color to JUST ONE of the margin areas outside of Bootstrap's container? 但是，如果您想给Bootstrap容器外部的空白边缘区域之一加颜色怎么办？

I solved it by wrapping the container, with a flexbox-container and building 3 distinct columns: left margin column, content column, and the right margin column. 我通过用flexbox-container包装容器并构建3个不同的列来解决此问题：左边距列，内容列和右边距列。

To ensure that it's always centered, I used this bit to determine the width of each margin column: 为了确保它始终居中，我使用此位来确定每个边距列的宽度：

.right-box, .left-box{
    width: calc((100vw - 1170px) /2); 
}

Here's a code pen . 这是一支密码笔。

Answer 4

Cant you just add a div before the wrapper? 不能只是在包装之前添加div吗？

Somthing like this: 像这样的东西：

|HTML| | HTML |

<body>
        <div class="backgroundColorContainer">
        <div class="wrapper">

        // code here

        </div>
        </div>
</body>

|CSS| | CSS |

.backgroundColorContainer
{
    background-color: #222222;
}

Worked for me :D 为我工作：D

扩展包装纸之外的背景色

问题描述

4 个解决方案

解决方案1
0 2014-04-25 18:25:13

解决方案2
0 2014-04-25 18:41:12

解决方案3
0 2016-09-22 20:28:40

解决方案4
0 2017-08-05 12:12:49

扩展包装纸之外的背景色

问题描述

4 个解决方案

解决方案1 0 2014-04-25 18:25:13

解决方案2 0 2014-04-25 18:41:12

解决方案3 0 2016-09-22 20:28:40

解决方案4 0 2017-08-05 12:12:49

解决方案1
0 2014-04-25 18:25:13

解决方案2
0 2014-04-25 18:41:12

解决方案3
0 2016-09-22 20:28:40

解决方案4
0 2017-08-05 12:12:49