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

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.

Answers


HTML:

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

CSS:

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

Try any of these links: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/


Try the CSS property vertical-align, like this:

#nameOfTheElement
{
    vertical-align: baseline;
}

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

Need Your Help

Why do stdint.h can be found but cstdint not?

c++ g++ stdint acc

I'm be suprised with that include stdint.h works but include cstdint not.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.