我开始使用CSS，所以我不敢编辑我已有的代码。其中一部分是主要{max-width：60em}，用于居中的文本和粘性菜单。当我尝试将.container {width：100％}添加到body或div之类的另一个部分时，它会弄乱我的粘性菜单。
如何让页面的一部分具有全宽背景？
（问题不是关于文本外观的中心，而是页面上的定位。）我希望文本在960px范围内，同时背景为100％宽度。
/* === Globals === */
html,body,div,header,footer,section,article,figure,nav,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}/*remembertodefinefocusstyles!*/:focus{outline:0;}/*remembertohighlightinsertssomehow!*/ins{text-decoration:none;}del{text-decoration:line-through;}/*tablesstillneed'cellspacing="0"'inthemarkup*/table{border-collapse:collapse;border-spacing:0;}
/* === Structure === */
.clear {
clear: both;
}
#footer {
background-color: rgba(225, 225, 225, 1.0);
bottom: 0;
color: rgba(102, 102, 102, 1.0);
height: 350px;
text-align: center;
width: 100%;
}
#footer p {
font-size: 10px;
font-weight: bold;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
}
#footer p:first-child {
padding-top: 75px;
}
.menu {
-moz-box-shadow: 0 0 0.5em 0 #000;
-webkit-box-shadow: 0 0 0.5em 0 #000;
box-shadow: 0 0 0.5em 0 #000;
background-color: rgba(170, 68, 100, 0.95);
clear: both;
display: block;
height: 40px;
margin: 0;
padding: 10px 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 99;
}
.menu ul li a,
.menu-trigger {
color: white;
float: right;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding: 15px;
text-decoration: none;
text-transform: uppercase;
width: 50px;
}
.menu ul li a:active {
color: #ffffff;
}
.menu ul li a:hover {
color: #aa4464;
background: #fff;
}
.menu ul li:hover ul {
display: block;
}
.menu ul ul {
display: none;
position: absolute;
top: 50px;
right: 160px;
}
.menu ul ul li {
display: block;
}
.menu ul ul li a {
background-color: rgba(170, 68, 100, 0.95);
color: white;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
text-transform: uppercase;
width: 100px;
}
.menu-trigger {
display: none;
}
main {
margin: auto;
max-width: 60em;
padding: 75px 5% 50px;
}
main h2 {
font-family: 'Exo', serif;
font-size: 36px;
font-weight: 600;
line-height: 150%;
}
main p {
font-family: 'Arial', 'Helvetica', sans-serif;
font-size: 16px;
line-height: 150%;
}
.container {
width: auto 100%;
}
.testimonial {
margin: auto;
max-width: 60em;
padding: 75px 5% 50px;
color: #fff;
}
.work ul {
display: block;
margin: auto;
max-width: 60em;
}
.work li {
float: left;
margin: 1em 1%;
padding: 1em 1%;
text-align: center;
width: 20%;
}
.work a {
color: #fff;
display: block;
position: relative;
text-decoration: none;
}
.work h3 {
color: #666666;
font-family: Arial, helvetica, sans-serif;
font-size: 16px;
left: 0;
margin-top: -8px;
position: absolute;
text-transform: uppercase;
top: 100%;
width: 100%;
}
.work img {
width: 100%;
}
/* 960 */
@media all and (min-width: 960px) {
main h1 {
font-size: 160px;
}
}
/* 600 */
@media all and (min-width: 600px) {
main h2 {
font-size: 36px;
}
main p {
font-size: 20px;
}
main h1 {
font-size: 96px;
}
}
/* 768 */
@media only screen and
(max-width: 768px){
.menu-trigger {
display: none;
}
.work li {
width: 45%;
}
}
/* 480 */
@media only screen and
(max-width: 480px){
.menu-trigger {
display: inline;
position: fixed;
}
.menu ul li a {
display: block;
width: 100%;
z-index: 96;
}
.menu ul ul {
display: none;
position: absolute;
top: 50px;
right: 160px;
}
.menu ul ul li {
display: block;
}
ul.open {
background-color: rgba(170, 68, 100, 0.95);
height: 100%;
position: fixed;
right: 0;
top: 60px;
width: 100%;
}
.work li {
padding: inherit;
width: 95%;
}
}<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<title>Tantalizea Lacaden</title>
<link href="styles.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="parallax-styles.css" />
<script src="jquery.js"></script>
<link href='http://fonts.googleapis.com/css?family=Exo:400,600' rel='stylesheet' type='text/css'>
</head>
<body>
<nav class="menu open">
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">Illustrations</a></li>
<li><a href="photography.html">Photography</a></li>
<li><a href="#">Printed Work</a></li>
</ul>
</li>
<li><a href="index.html">Home</a></li>
</ul>
<a href="#" class="menu-trigger"><img src="hamburger.png" width="20px" /></a>
</nav>
<main>
<img src="http://placehold.it/960x500">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, purus in porttitor pellentesque, erat arcu tincidunt diam, dapibus faucibus leo mauris at sapien. In porttitor vehicula sodales. Vivamus massa neque, facilisis eu felis ut, aliquet convallis nisi. Nam elementum tellus vitae gravida fermentum. Nullam et imperdiet leo. Integer ut euismod lorem, in placerat lacus. Curabitur bibendum arcu ut feugiat commodo. Suspendisse ut mi vel orci ullamcorper tincidunt. Nam vitae fringilla nibh. Nullam hendrerit blandit velit eu hendrerit.</p><br />
<p>Praesent eu enim non massa pellentesque lobortis. In in sagittis dolor. Aliquam non massa erat. Ut aliquet gravida tellus, sed volutpat nibh condimentum et. Nunc quam purus, vehicula quis venenatis et, porttitor vel dolor. Cras facilisis dui id elit bibendum, in ullamcorper leo ultricies. Praesent rutrum lacus sit amet sem convallis, ut interdum dolor vestibulum</p><br />
<p>Tum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In iaculis pharetra odio, sit amet consectetur elit facilisis ac. Praesent eget tristique ipsum. Donec malesuada bibendum lacinia. Praesent non purus sodales, pulvinar mi vitae, tincidunt leo. Phasellus vitae elit ut nisl semper fringilla id rutrum dolor. Donec a massa adipiscing, cursus risus vitae, porttitor tortor. Nullam sagittis est sapien, sit amet pharetra turpis imperdiet vel. Etiam sit amet ligula pretium, vulputate eros ac, bibendum velit. Aenean convallis ante purus, ac bibendum orci laoreet ac. Donec a convallis mauris. Nulla non lacus non ipsum pretium tempor. In hac habitasse platea dictumst. Aenean at ipsum vulputate, sagittis dui ut, pharetra neque. Nam eget sodales orci. Aliquam pharetra nunc at nisl pellentesque, nec fringilla enim iaculis.</p><br />
<section class="work">
<ul align="middle">
<li>
<a href="illustration.html">
<h3>Illustration</h3>
<img src="images/illustration.jpg" alt="" />
</a>
</li>
<li>
<a href="photography.html">
<h3>Photography</h3>
<img src="images/photography.jpg" alt="" />
</a>
</li>
<li>
<a href="print.html">
<h3>Print</h3>
<img src="images/print.jpg" alt="" />
</a>
</li>
<li>
<a href="web.html">
<h3>Web</h3>
<img src="images/web.jpg" alt="" />
</a>
</li>
</ul>
<div class="clear"></div>
</section>
</main>
<div class="container"><div class="testimonial"><h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, purus in porttitor pellentesque, erat arcu tincidunt diam, dapibus faucibus leo mauris at sapien. In porttitor vehicula sodales. Vivamus massa neque, facilisis eu felis ut, aliquet convallis nisi. Nam elementum tellus vitae gravida fermentum. Nullam et imperdiet leo. Integer ut euismod lorem, in placerat lacus. Curabitur bibendum arcu ut feugiat commodo. Suspendisse ut mi vel orci ullamcorper tincidunt. Nam vitae fringilla nibh. Nullam hendrerit blandit velit eu hendrerit.</p><br /></div></div>
<footer id="footer">
<p>tantalizea@gmail.com</p>
<p>2015 © Tantalizea Lacaden. All Rights Reserved.</p>
</footer>
</body>
</html>
答案 0 :(得分：0)
我尝试了宽度不同的东西，所以我想做相反的事情。以下代码有效！感谢大家的帮助！ ：）
.container {
min-width: 100%;
background-color: #aa4464;
}