0

私はこのページで何日も苦労してきましたが、どこが間違っていたのかわかりません。目が痛いので助けが必要です。以前は固定フッターを使用できましたが、何らかの理由でこのページは非常に気まぐれです。

ページ: 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;
}
4

1 に答える 1

0

これを変更するだけです：

#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 を作成できます。
この助けを願っています。

于 2013-03-12T20:03:12.590 に答える