由于某种原因，我的代码页脚部分的 css 不起作用。我希望页脚具有绿色背景，并且位于正常容器之外。CSS正在为其他东西工作。有谁之前经历过这个吗？
这是我的代码：
HTML：
<body>
<div class="wrapper">
<div class="header"></div><!--end header -->
<div id="content">
<div class="container">
<!--================== Navigation ===========================-->
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-tabs">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Programs</a>
</li>
<li>
<a href="#">Academics</a>
</li>
<li>
<a href="#">Research</a>
</li>
<li>
<a href="#">Alumni</a>
</li>
</ul>
</div>
</div>
<!--======================= Feature =====================-->
<div class="row">
<div class="col-lg-12">
<div class="carousel slide" id="myCarousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0"
data-target="#myCarousel"></li>
<li data-slide-to="1" data-target=
"#myCarousel"></li>
<li data-slide-to="2" data-target=
"#myCarousel"></li>
</ol><!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
…
</div>
<div class="item">
…
</div>
<div class="item">
…
</div>
</div><!-- Carousel nav -->
<a class="carousel-control left" data-slide="prev"
href="#myCarousel">‹</a> <a class=
"carousel-control right" data-slide="next" href=
"#myCarousel">›</a>
</div>
</div>
</div>
<!--======================= About =======================-->
<div class="row">
<div class="col-lg-8">
<div id="about">
<h2>About the DPO</h2>
</div>
<div class="col-lg-6">
<div class="dpo-about">
<p><br>
Since its inception in 1968, the Diversity
Programs Office (DPO) has positively impacted
the academic, professional and personal growth
of tens of thousands of underrepresented
minority students through a range of
programs.</p>
</div>
</div>
</div>
<!--=================== Meet the Staff ==================-->
<div class="col-lg-4">
<div id="staff">
<h2>Meet the Staff</h2>
</div>
<!--=================Thumbnails==================-->
<div class="row-fluid">
<div class="thumbnails" style="margin-left: 2em">
<div class="staff">
<ol>
<div class="staff-image">
<li>
<a class="thumbnail" href=
"#"><img alt="50x50" data-src=
"holder.js/50x50" src=
"images/thumbnails/theodorecaldwell-75x75.jpg"
style=
"width: 50px; height: 50px;"></a>
</li>
</div>
<div class="staff-image">
<li>
<a class="thumbnail" href=
"#"><img alt="50x50" data-src=
"holder.js/50x50" src=
"images/thumbnails/kylefoster-75x75.jpg"
style=
"width: 50px; height: 50px;"></a>
</li>
</div>
<div class="staff-image">
<li>
<a class="thumbnail" href=
"#"><img alt="50x50" data-src=
"holder.js/50x50" src=
"images/thumbnails/tonishalane-75x75.jpg"
style=
"width: 50px; height: 50px;"></a>
</li>
</div>
<div class="staff-image">
<li>
<a class="thumbnail" href=
"#"><img alt="50x50" data-src=
"holder.js/50x50" src=
"images/thumbnails/maggieramsey-75x75.jpg"
style=
"width: 50px; height: 50px;" /></a>
</li>
</div>
<div class="staff-image">
<li>
<a class="thumbnail" href=
"#"><img alt="50x50" data-src=
"holder.js/50x50" src=
"images/thumbnails/rickeycaldwell-75x75.jpg"
style=
"width: 50px; height: 50px;"></a>
</li>
</div>
<div class="staff-image">
<li>
<a class="thumbnail" href=
"#"><img alt="50x50" data-src=
"holder.js/50x50" src=
"images/thumbnails/placeholder-75x75.jpg"
style=
"width: 50px; height: 50px;" /></a>
</li>
</div>
</ol>
</div>
</div>
</div>
<!--=================end Thumbnails==============-->
</div>
</div>
<!--======================= News ========================-->
<div class="row">
<div class="col-lg-8">
<div id="news">
<h2>News and Announcements</h2>
</div>
<div class="media">
<a class="pull-left" href="#"><img alt="64x64"
class="media-object" data-src="holder.js/64x64"
src="images/thumbnails/news%20placeholder.jpg"
style="width: 100px; height: 80px;" /></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div class="media-news">
Cras sit amet nibh libero, in gravida
nulla. Nulla vel metus scelerisque.
</div><a class="btn-news" href="#">Read
More</a>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img alt="64x64"
class="media-object" data-src="holder.js/64x64"
src="images/thumbnails/news%20placeholder.jpg"
style="width: 100px; height: 80px;" /></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div class="media-news">
Cras sit amet nibh libero, in gravida
nulla. Nulla vel metus scelerisque.
</div><a class="btn-news" href="#">Read
More</a>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img alt="64x64"
class="media-object" data-src="holder.js/64x64"
src="images/thumbnails/news%20placeholder.jpg"
style="width: 100px; height: 80px;" /></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div class="media-news">
Cras sit amet nibh libero, in gravida
nulla. Nulla vel metus scelerisque.
</div><a class="btn-news" href="#">Read
More</a>
</div>
</div>
<!--================End News Items==================-->
</div>
<!--======================= Events ======================-->
<div class="col-lg-4">
<div id="events">
<h2>Events</h2>
</div>
<div class="media">
<a class="pull-left" href="#"><img alt="64x64"
class="media-object" data-src="holder.js/64x64"
src="images/thumbnails/news%20placeholder.jpg"
style="width: 70px; height: 50px;" /></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div class="media-news">
Date Time
</div>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img alt="64x64"
class="media-object" data-src="holder.js/64x64"
src="images/thumbnails/news%20placeholder.jpg"
style="width: 70px; height: 50px;" /></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div class="media-news">
Date Time
</div>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img alt="64x64"
class="media-object" data-src="holder.js/64x64"
src="images/thumbnails/news%20placeholder.jpg"
style="width: 70px; height: 50px;" /></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div class="media-news">
Date Time
</div>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img alt="64x64"
class="media-object" data-src="holder.js/64x64"
src="images/thumbnails/news%20placeholder.jpg"
style="width: 70px; height: 50px;"></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div class="media-news">
Date Time
</div>
</div>
</div>
</div>
</div>
<!--==================== Highlights =====================-->
<div class="row">
<div class="col-lg-8">
<div id="highlights">
<h2>Highlights</h2>
</div>
</div>
<!--======================= Showcase ====================-->
<div class="col-lg-4">
<div id="showcase">
<h2>Showcase</h2>
</div>
</div>
</div>
</div><!--end content -->
<!--======================= Footer ====================-->
<div class="footer">
<!-- copyrights region -->
<div class="container">
<div class="copyrights-wrapper" id="copyrights-wrapper">
<div id="footer-msu-logo">
<a href="http://www.msu.edu">Michigan State
University</a>
</div><!-- footer-msu-logo -->
<div id="footer-copyrights">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div><!--end #footer -->
</div>
</div>
CSS
#wrapper{
border: 1px solid black;
width: 600px;
margin-left: auto;
margin-right: auto;
position: relative; //make #wrapper position non-static
min-height: 99%;
}
/*body {background-color:#000;}*/
h2 {
padding: 10px;
font:"Times New Roman", Times, serif;
color:#FFF}
.container
{
background-color:#FFF;
padding-bottom: 5px;
}
.headerwrapper{
background-color:#000;
width:100%;
border:inset;
border-color:#FFF;
}
ul.thumbnails li {
display: inline-block;
}
.staff-image {
margin: 2px;
display: inline-block;
list-style-type:none;
}
.staff {
margin-top: 10px;
margin-left: -15px;
}
.nav a{
color:#FFF;
padding: 5px;
}
.nav {
width:100%;
background-color: #000;
border:solid;
border-color:#FFF;
}
.news-body {
}
.media {
margin-left: 13px;
}
.media-heading {
color: #03F;
}
.media-news {
font-size: 12px;
}
.media {
padding-bottom: 5px;
border-bottom: solid;
border-bottom-width: thin;
border-color: #CCC;
}
#about {
margin-top:5px;
background-color:#000;
}
#staff {
margin-top:5px;
background-color:#000;
}
#news {
margin-top:5px;
background-color:#000;
}
#events {
margin-top: 5px;
background-color:#000;
}
#highlights {
margin-top:5px;
background-color:#000;
}
#showcase {
margin-top:5px;
background-color:#000;
}
.dpo-about {
margin-left: 13px;
}
.btn-news {
background-image: 0 0 60%;
background-image: 0 0 60%;
background-image: 0 0 60%;
background-image: 0 0 60%;
background-image: linear-gradient(top,rgba(230,230,230,1) 0 60%;
-webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,1);
-moz-box-shadow: 0 0 2px 0 rgba(0,0,0,1);
box-shadow: 0 0 2px 0 rgba(0,0,0,1);
border: solid 1px rgba(102,102,102,1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 65px;
display: inline-block;
font-size: 10px;
line-height: 13px;
text-indent: -2px;
text-align: center;
color: rgba(120,120,120,1);
font-weight: 700;
margin-left: 210px;
}
.btn-news:hover {
text-decoration: none;
}
.btn-news:active {
}
/* Footer */
.footer{
height: 50px;
background-color: #174137;
text-align: center;
}
.copyrights-wrapper {
background-color:#174137;
}