扩展包装纸之外的背景色

Question

我试图将我的nav-wrapper div或一般来说，我的导航区域的背景色扩展到960px容器之外。 我尝试了一些技巧，但似乎没有任何效果。 请参阅随附的代码和JSFiddle。

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：

    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

只需left:0; 到.nav-wrapper并从背景色中删除repeat-x ：

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

这里是一个FIDDLE

Answer 2

好的，这是我的答案。 它有点黑，但它应该可以工作...因此，您不能将其限制在包装器的范围内，因为它的上限为960px。 您需要在包装器之前声明一些内容。

我要做的是制作一个小的白色图像，其宽度为1px，无论您的导航栏有多高。 然后，在主体中设置背景色和图像：

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

有缺点。 您必须知道导航的确切高度，如果更改了导航高度，则还需要更改图像的大小。 让我知道这是否可行-感谢您提供图片，它清除了您想要的内容。

Answer 3

如果有人来这里希望将背景色扩展到Bootstrap容器之外，这就是我解决的方法。

Bootstrap的容器将在页面上为您提供居中的内容列。 但是，如果您想给Bootstrap容器外部的空白边缘区域之一加颜色怎么办？

我通过用flexbox-container包装容器并构建3个不同的列来解决此问题：左边距列，内容列和右边距列。

为了确保它始终居中，我使用此位来确定每个边距列的宽度：

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

这是一支密码笔。

Answer 4

不能只是在包装之前添加div吗？

像这样的东西：

| HTML |

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

        // code here

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

| CSS |

.backgroundColorContainer
{
    background-color: #222222;
}

为我工作：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