place footer at the bottom of the page

place footer at the bottom of the page

pI want to place a footer at the bottom of the page. It is contained
inside a div. The problem is that if I use fixed positioning, the footer
sticks at the bottom but does not disappear if I scroll up the page. If I
use absolute or relative positioning the footer shows up at the middle of
the page. /p pI want it to stay at the bottom but it should not be sticky
i.e when scroll up, the footer must disappear. It must shows when I scroll
down to bottom and reached end of the page./p pPS: The page contains an
iframe./p pstronghtml/strong/p precodelt;!DOCTYPE HTMLgt; lt;html
lang=engt; lt;headgt; lt;titlegt;Helplt;/titlegt; lt;meta charset=UTF-8gt;
lt;link rel=stylesheet href=style.cssgt; lt;/headgt; lt;bodygt; lt;div
id=headergt; lt;img id=logo src=images/logo.png alt=Logogt; lt;/divgt;
lt;div id=menugt; lt;ulgt; lt;ligt;lt;a href=about.html
target=contentgt;Aboutlt;/agt;lt;/ligt; lt;ligt;lt;a href=support.html
target=contentgt;Supportlt;/agt;lt;/ligt;lt;brgt; lt;ligt;Student
Operation lt;ulgt; lt;ligt;lt;a href=logging_in.html
target=contentgt;Logging Inlt;/agt;lt;/ligt; lt;ligt;lt;a
href=creating_enquiry.html target=contentgt;Creating
Enquirylt;/agt;lt;/ligt; lt;ligt;lt;a href=issuing_prospectus.html
target=contentgt;Issuing Prospectuslt;/agt;lt;/ligt; lt;ligt;lt;a
href=making_admission.html target=contentgt;Making
Admissionlt;/agt;lt;/ligt; lt;ligt;lt;a href=collecting_fees.html
target=contentgt;Collecting Feeslt;/agt;lt;/ligt; lt;ligt;lt;a
href=issuing_kit.html target=contentgt;Issuing Kitlt;/agt;lt;/ligt;
lt;/ulgt; lt;/ligt;lt;brgt; lt;ligt; Batch Operation lt;ulgt; lt;ligt;lt;a
href=creating_batch.html target=contentgt;Creating Batchlt;/agt;lt;/ligt;
lt;ligt;Marking Attendancelt;/ligt; lt;ligt;Transferring Batchlt;/ligt;
lt;/ulgt; lt;/ligt;lt;brgt; lt;ligt; Resource Operation lt;ulgt;
lt;ligt;Center Resource Allocationlt;/ligt; lt;ligt;Student Resource
Allocationlt;/ligt; lt;/ulgt; lt;/ligt;lt;brgt; lt;ligt; Course Operation
lt;ulgt; lt;ligt;Course Typelt;/ligt; lt;ligt;Course Listlt;/ligt;
lt;ligt;Course Modulelt;/ligt; lt;ligt;Course Price Listlt;/ligt;
lt;ligt;Distance University Listlt;/ligt; lt;/ulgt; lt;/ligt;lt;brgt;
lt;ligt; Inventory Operation lt;ulgt; lt;ligt;Kit Managementlt;/ligt;
lt;ligt;Item Categorylt;/ligt; lt;ligt;Item Stocklt;/ligt; lt;ligt;Item
Purchaselt;/ligt; lt;/ulgt; lt;/ligt;lt;brgt; lt;ligt; Admin Operation
lt;ulgt; lt;ligt;Kit Validationlt;/ligt; lt;ligt;Users amp;
Groupslt;/ligt; lt;ligt;Employee Managementlt;/ligt; lt;/ulgt; lt;/ligt;
lt;/ulgt; lt;/divgt; lt;div id=framegt; lt;iframe id=content
name=contentgt;lt;/iframegt; lt;/divgt; lt;div id=footergt; lt;pgt;Footer
textlt;/pgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; /code/pre
pstrongcss/strong/p precodebody { margin: 0; padding: 0; font-family:
sans-serif; font-size: 80%; } #header { background-color: #f8651c;
padding-bottom: 5%; margin: 0; border: 0; } #logo { position: relative;
left: 20px; top: 20px; } #menu { width: 25%; float: left; border-right:
2px solid #a2a2a2; margin: 0; padding: 0; } #content { position: absolute;
height: 93%; width: 74%; padding: 0; margin: 0; border: 0; } #footer{
position: fixed; left: 0; bottom:0; background-color:#000; width:100%;
height: 10px; } /code/pre