页脚卡在页面中间div不填充保持屏幕

因此，我正在更新本地马戏团网站，页脚不想停留在页面的底部。我不希望它固定在屏幕的底部，而是当您滚动到页脚应该位于的内容的底部时。我也试图用半透明黑色背景填充剩余空间到按钮右侧。该网站应看起来像这样http://sdrv.ms/18Njjnw，但它看起来像http://sdrv.ms/17PkpdR。提前谢谢你的帮助。页脚卡在页面中间div不填充保持屏幕

<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; •&nbsp; 154 North Broadway&nbsp; •&nbsp; Peru, IN 46970 &nbsp;• &nbsp;(765) 472-3918&nbsp; •&nbsp; Fax:(765) 472-2826 &nbsp;• &nbsp;[email protected] </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; 
}

来源

2013-07-29 Cody Krauskopf