如何使一个页脚DIV始终在页面

Question

当一个弹出窗口打开的底部，并扩大了身体的高度

页脚应到页面的底部，但我无法找到如何做到这一点

这里是我的代码

<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> 

感谢您阅读本

任何建议将不胜感激。

Answer 1

尝试这些链接：
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

http://blog.rajatpandit.com/2008/06/19/making-footer-stick-to-the-bottom-of-the-page/

Answer 2

尝试的CSS属性垂直对齐，这样的：

#nameOfTheElement 
{ 
    vertical-align: baseline; 
} 

Answer 3

HTML：

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

CSS：

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

Answer 4

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