Question

我已经在这个页面上挣扎了几天，我无法弄清楚我哪里出错了。我的眼睛疼，我需要一些帮助。我之前已经能够使用粘性页脚，但出于某种原因，这个页面非常有气质。

页面：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">&quot;Food is like love. It should be entered into with abandon or not at all.&quot;</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;
}

Answer 1

只需改变一下：

#baroverlay {
  width: 100%;
  height: 80px;
  position: fixed;
  top: 248px;
  background-color: rgba(66, 17, 24, 0.8);
}

用这个：

#baroverlay {
  width: 100%;
  height: 80px;
  position: fixed;
  bottom:0;
  background-color: rgba(66, 17, 24, 0.8);
}

这是一个plunker。顺便说一句，你可以创建一个包含多个文件的plunker 希望这有帮助。

在页脚停留并与主要内容分开时遇到问题

1 个答案: