所以我正在更新一个本地马戏团网站，而页脚不想留在页面底部。我不希望它固定在屏幕底部，而是当您滚动到页脚应该在的内容底部时。我还尝试使用 div 用半透明的黑色背景填充按钮右侧的剩余空间。该站点应该看起来像这样http://sdrv.ms/18Njjnw但它看起来像http://sdrv.ms/17PkpdR。提前谢谢你的帮助。
<body>
<div id="body">
<a href="index.html" ><img id="logo" src="images/logo.png" alt="circus logo" /></a>
<div id="buttons" >
<div class="opa"><a class="buttons" href="circus.html"> Circus </a></div>
<div id="currentPage" class="opa"> <a class="buttons" href="tickets.html"> Tickets </a></div>
<div class="opa"><a class="buttons" href="performers.html"> Performers </a></div>
<div class="opa"><a class="buttons" href="band.html"> Circus City Band </a></div>
<div class="opa"><a class="buttons" href="festival.html"> Circus City Festival </a></div>
<div class="opa"><a class="buttons" href="calendar.html"> Calendar </a></div>
<div class="opa"><a class="buttons" href="about.html"> About </a></div>
<div class="opa"><a class="buttons" href="forms.html"> Forms </a></div>
</div>
<div id="contentContain" >
<div id="paragraph">
<h1> Order Tickets
</h1>
<p>
Performance Dates
<br />
Family Night:<br />
Friday, July 12, 2013 - 7 p.m.<br />
General admission seating - $5.00<br />
Tickets go on sale the day of show!<br />
<br />
Regular Performances:<br />
Saturday, July 13 - 2 p.m. & 7 p.m. <br />
Sunday, July 14 - 3 p.m. <br />
Monday - Friday, July 15-19 - 7 p.m. <br />
Saturday, July 20 - 2 p.m. & 7 p.m. <br />
<br />
Order Online, at the Box Office, or by calling us at 765.472.3918
rom the barn to the big top, Circus has<br /> been a part of Peru, Indiana for over 100 years. Exp<br />erience a walk through Peru's circus history at the Circus City Museum. This popular Museum, locat<br />ed in the Circus City Center, is filled with photos,<br /> miniatures, displays, and costumes from circus past. The museum is open Monday through Friday, A<br />pril through September from 9 am to 5 pm and October throu<br />gh March 9 am to 4 pm. During circus week enjoy<br /> the many circus wagons displayed outs<br />ide the museum as well as extended hours before and after each circus performance. Admission is by <br />donation only. Group tours can be scheduled<br /> by contacting the Circus office at 765-472-3918.
Monetary and ar<br />tifact donations are accepte<br />d and greatly appreciated.
For monetary donations se<br />nd check or Mon<br />ey order to:
Circus City Museum
C/O Circus City Fest<br />ival Inc.
154 N. Broadway
Peru Indiana.
<br /><br />
Circus artifacts can al<br />so be mailed, delivered, or picked up.
Contact the Circus City Fes<br /><br />tivals office at 765-472-3918 for more details.
Circus City Gift Shop<br />
Complete your “Big Top” ex<br /><br />perience with a souvenir from our Circus City Gift Shop! Memorabilia such as post cards, t-shirts, hats, toys, and more are <br />available for purchase. The gift shop is located in the <br />Circus City Center and is open to the public Monday through Friday, <br />April through September from 9 am to 5 pm and October through March from 9 am to 4 pm.<br /> Proceeds are used to support Circus City Festivals, Inc. <br />and the Peru Amateur Youth Circus program.
</p>
<div id="ticketsbut" ><a id="order" href="http://sa1.seatadvisor.com/sabo/servlets/EventSearch?presenter=CIRCUSCITY">Place Ticket Order </a></div>
</div>
<div id="content"> </div>
</div>
<a href="http://www.firstbankofberne.com/"><img id="bank" src="images/bank.png" /></a>
<div id="footer" >
<p id="foottext"> Circus City Festival, Inc. •&nbsp; 154 North Broadway •&nbsp; Peru, IN 46970 • (765) 472-3918 •&nbsp; Fax:(765) 472-2826 • info@perucircus.com </p>
</div>
</div>
</body>
</html>
</html>
body{
margin:0px;
padding:0px;
}
html{
}
div.sidebar{
background-color:black;
width:35%;
min-width:430px;
filter: alpha(opacity=50);
opacity: .5;
}
#body{
position:relative;
min-height:100%;
min-width:100%
}
#foottext{
}
#contentContain{
position:absolute;
top:0px;
left:430px;
height:auto;
z-index:1000;
color:white;
}
#content{
position:absolute;
top:0px;
left:0px;
width:100%;
background-color:black;
filter: alpha(opacity=50);
opacity: .5;
height:100%;
z-index:-1;
}
#paragraph{
text-align:center;
}
#sideBarContainer{
height:100%;
}
#logo{
width:420px;
z-index:1000;
}
#footer{
background-color:black;
width:100%;
height:35px;
position:absolute;
bottom:0px;
left:0px;
text-align:center;
color: white;
z-index:1000;
}
a.buttons{
display:block;
text-decoration:none;
color:white;
height:35px;
line-height:35px;
text-align:center;
font-family: Lucida Bright;
vertical-align:middle;
}
#currentPage{
background-color:black;
filter: alpha(opacity=50);
opacity: .5;
}
#currentPage:hover{
filter: alpha(opacity=100);
opacity: 100;
}
a.buttons:hover{
background-color:black;
filter: alpha(opacity=100);
opacity: 100;
}
#buttons{
width:430px;
}
#bank{
position:absolute;
left:0px;
bottom:35px;
}