How to make a footer div always on the bottom of a page

Question

When a popup windows opened and enlarged the body's height

the footer should go to the bottom of page,but I cannot find how to do that

here is my code

<style>
.div1{
width:360px;
height:240px;
overflow:auto;
overflow-x:hidden;
border:1px solid #f00;
position:absolute;
}
.black_overlay{ 
display: none; 
position: fixed; top: 0%; left: 0%; width: 100%; height: 100%;
background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); }
.white_content { 
display: none; 
position: absolute; 
top: 25%; left: 25%; width: 50%;
padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; }
</style> 
<a onclick="document.getElementById
('light').style.display='block';document.getElementById('fade').style.display='block'" href="javascript:void(0)">open</a>  

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />

<div class="div1">
footer</div>
<div id="light" class="white_content">content
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<a onclick="document.getElementById
('light').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)">close</a>
</div> 
<div id="fade" class="black_overlay"></div>

Thanks for reading this

Any suggestion will be appreciated.

Answer 1

HTML:

<div id="footer"></div>

CSS:

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

Answer 2

#element
{
  position:fixed;
  bottom:0;
  z-index:50000; //Just in case :)
}

Answer 3

Try the CSS property vertical-align, like this:

#nameOfTheElement
{
    vertical-align: baseline;
}