I'm struggling to create a footer that consistently stays at the bottom of the page, regardless of the amount of content on the page. I've tried following various tutorials but haven't had much success. I'm starting to think I must be doing something wrong.
Can anyone provide some guidance or help me troubleshoot? Thank you
EDIT: Here is my code snippet
HTML code for the page
<html>
<head>
<title>
Test Page Footer
</title>
<style type="text/css">
html, body, .container {
margin: 0;
padding: 0;
}
body {
background-color: green;
color: white;
}
.container {
padding-top: 97px;
}
</style>
<script src="/inc/jquery.js"></script>
<script src="/inc/sticky-footer.js"></script>
</head>
<body>
<div class="container">
<? include("./inc/navbar"); ?>
<div class="content">
Content of the page
</div>
<?php include("./inc/footer"); ?>
</div>
</body>
</html>
HTML code for the footer
<html>
<head>
<title>
/inc/footer
</title>
<meta name="description" content="Site Footer">
<style type="text/css">
.footer {
width: 100%;
background-color: orange;
color: white;
}
</style>
<script src="/inc/jquery.js"></script>
<script src="/inc/footer.js"></script>
</head>
<body>
<div class="footer">
© ************.altervista.org 2017
</div>
</body>
</html>
JavaScript file
// Window load event used just in case window height is dependant upon images
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $("#footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});