擴展包裝紙之外的背景色

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