我已经在这个页面上苦苦挣扎了好几天，我不知道我哪里出错了。我的眼睛受伤了，我需要一些帮助。我以前可以使用粘性页脚，但由于某种原因，此页面非常喜怒无常。
页面：http: //isolatedhowl.com/workshop/buckstop/
html： http: //plnkr.co/edit/kpMf8txpBSqEGOwXxE0s
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/buckstop.css" media="screen"/>
<title>Buck Stop</title>
<meta name="description" content="Buck Stop is a classic barbecue and small plate saloon." />
<meta charset="UTF-8"/>
</head>
<body>
<div id="wrapper">
<article id="maininfo">
<header>
<div id="coverimg"><img src="images/buckstop_interior.jpg" alt="Buck Stop Interior" width="560" height="315"/></div>
<figure id="logo"><a href="#"><img src="buckstop_logo.png" alt="Buck Stop Logo"/></a></figure>
</header>
<nav id="mainnav">
<ul>
<li><a href="#">Kitchen</a></li>
<li><a href="#">Bar</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div id="maincontent">
<p class="center quote">"Food is like love. It should be entered into with abandon or not at all."</p>
<p class="center">- Harriet Van Horne</p>
</div>
</article>
</div>
<article id="storyinfo" class="infolinks">
<header><h2>Our Story</h2></header>
<p>Find out more about who we are, what makes us unique, and what we're all about...</p>
<p class="right"><a href="#">Read More</a></p>
</article>
<article id="menuinfo" class="infolinks">
<header><h2>Our Menu</h2></header>
<p>All of our food is prepared in house and sourced locally. Great food, great health...</p>
<p class="right"><a href="#">Read More</a></p>
</article>
<div id="baroverlay"></div>
</body>
</html>
CSS： http: //plnkr.co/edit/arJTFnQpEmJH7WZtFt72
body {
background-color: #000;
background-image: url('buckstop_background.jpg');
background-attachment: fixed;
background-size: 100%;
color: #FFF;
font-size: 18px;
}
html, body {
height: 100%;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 20px;
}
#wrapper {
width: 600px;
min-height: 100%;
}
#maininfo {
background-color: rgba(0, 0, 0, 0.85);
color: #FFF;
overflow: auto;
position: fixed;
top: 0;
left: 50px;
width: 560px;
padding: 20px 20px 170px 20px;
}
#coverimg {
width: 560px;
margin-right: auto;
margin-left: auto;
}
#logo {
position: fixed;
top: 260px;
left: 450px;
z-index: 1;
}
#baroverlay {
width: 100%;
height: 80px;
position: fixed;
top: 248px;
background-color: rgba(66, 17, 24, 0.8);
}
#mainnav {
color: #FFF;
font-size: 24px;
text-align: center;
width: 560px;
word-spacing: 40px;
margin: 10px 0;
}
#maincontent {
margin: 20px 0;
}
#mainnav li {
display: inline;
width: 20px;
text-align: center;
}
#mainnav a:link, #mainnav a:visited {
color: #FFF;
text-decoration: none;
}
#mainnav a:hover {
color: #892332; /* Burgundy */
text-decoration: none;
}
#storyinfo {
background-color: rgba(0, 0, 0, 0.85);
color: #FFF;
font-size: 16px;
width: 255px;
position: relative;
margin-top: -170px;
left: 50px;
height: 170px;
clear: both;
padding: 20px;
}
.infolinks a:link, #storyinfo a:visited {
color: #892332; /* Burgundy */
text-decoration: none;
}
.infolinks a:hover {
color: #892332; /* Burgundy */
text-decoration: none;
font-style: italic;
}
#menuinfo {
background-color: rgba(0, 0, 0, 0.85);
color: #FFF;
font-size: 16px;
width: 255px;
position: relative;
margin-top: -170px;
bottom: 0;
left: 355px;
height: 170px;
clear: both;
padding: 20px;
}
.quote {
color: #FFF;
font-size: 30px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}