In a recent website work I had to keep footer always at the bottom regardless of the content. If there is no content or very less content then footer use to come up instead of sticking at bottom of the page. Here is the CSS solution I found for the same:
Lets say the page structure is something like this:
<html> <head><title>TITLE</title></head><body> <div id="page"> <div id="header">HEADER</div> <div id="content">CONTENT</div> <div id="footer">FOOTER</div> </div> </body> </html>
Then we just need to use the following CSS code for footer which we need to keep in head section or some CSS file which will linked in head section:
<!--
#page
{
position:relative;
height:100%;
}
#content
{
padding-bottom:40px; /* Height of the footer */
}
#footer
{
position:absolute;
bottom:0;
width:100%;
height:40px; /* Height of the footer */
}
-->
and we are done. Just test in any browser 🙂
This can be quite easily done without using any CSS if we are using <table> tag with height attribute instead of <div> tag. for e.g.
<html> <head><title>TITLE</title></head> <body> <table width="100%" height="100%"> <tr><td valign="top">HEADER</td></tr> <tr><td valign="middle">CONTENT</td></tr> <tr><td valign="bottom">FOOTER</td></tr> </table> </body> </html>
Here table height is set to 100% to use whole page and valign is used for vertical alignment of . height attribute can be avoided using style element.
This will work fantastic but might fail in W3C validation as height attribute is no more supported so better use the solution with <div> tag with CSS.
Note: I tested this in Chrome browser only.
Have Fun 😉
Manual Web Crawler 