How do I make a footer which will stick to the bottom of the page and that will move with my content? I tried using position, but when there was more content than would fit on the screen, the footer stayed at the bottom of the screen, with content overlaying on top of it.
This method fixed my problem. I think it should fix all the problem related sticky footer. Thank you for all responding to my question.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
footer.bottom {
position: fixed;
bottom: 0px;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
if ( $('#x')[0].scrollHeight < $(window).height() ) {
$('footer').addClass('bottom');
} else {
$('footer').removeClass('bottom');
}
});
</script>
</head>
<body>
<div id="x">
<table height="1000" bgcolor="#999999">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<footer>
Lorem Ipsum
</footer>
</div>
</body>
</html>