My multipage website project is coming together, but I'm facing some issues with the footer. While the navbar is behaving as expected on all pages, the footer seems to have a mind of its own. It's inconsistently positioned across different pages, sometimes appearing where it should be and other times getting misplaced even before any content is added.
I've tried various solutions from online sources, but none seem to work so far. HTML:
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/navFooter.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="navbar"></div>
<div class="col-md-12">
<table class="table">
<td style="border: none;"><p>Choose the type of comparison you'd like to make.</p></td>
<td>
<b>Quick Comparison</b><br>
<a href="/a/comparisons?action=indicators&nid=1000...6700">Compare all counties</a><br>
<b>Custom Comparison</b><br>
<a href="/a/comparisons">Compare selected counties and/or jurisdictions only</a>
</td>
</table>
</div>
<div id="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$("#navbar").load("navbar.html");
});
$(function(){
$("#footer").load("footer.html");
});
</script>
</body>
CSS:
html, body {
height: 100%;
width: 100%;
}
body {
padding-top: 90px;
position: relative;
overflow: scroll;
}
.footer {
position: absolute;
margin: 0;
width: 100%;
background-color: #19D8FF;
padding: 25px;
border-top: 4px solid #3399CC;
min-height: 150px;
max-height: 250px;
}
Footer HTML:
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-3 pull-left">
<img src="img/Wordmark.png" alt="Logo">
</div>
<div class="col-md-5">
<a href="links.html">Links</a> |
<a href="contact.html">Contact</a> |
<a href="apps/azindex.pl">A-Z Index</a> |
<a href="siteMap.html">Site Map</a> |
<a href="disclaimer.html">Disclaimer</a></li>
</div>
<div class="col-md-4">
<p class="muted pull-right">© 2017 All rights reserved</p>
</div>
</div>
</div>
</footer>