我试图将我的nav-wrapper div或一般来说，我的导航区域的背景色扩展到960px容器之外。我尝试了一些技巧，但似乎没有任何效果。请参见随附的代码和JSFiddle。
JSFidde：Header Background Color Extend
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">☰</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;
}
}
最佳答案
好的，这是我的答案。它有点黑，但它应该可以工作...因此，您不能将其限制在包装器的范围内，因为它的上限为960px。您需要在包装器之前声明一些内容。
我要做的是制作一个小的白色图像，其宽度为1px，无论您的导航仪有多高。然后，在主体中设置背景色和图像：
body{
background-image: url('white.jpg');
background-color: #cecece;
background-position: left top;
background-repeat: repeat-x;
}
有缺点。您必须知道导航的确切高度，如果该值发生变化，则还需要更改图像的大小。让我知道这是否可行-感谢您提供图片，它清除了您想要的内容。
关于html - 扩展 wrapper 之外的背景色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23299500/