I need to implement a consistent footer on multiple web pages created with jQuery and bootstrap 3. Following the example provided by Bootstrap, I have written the script below to add the footer:
// Default
$( document ).ready(function() {
$('body').append('<footer class="footer">' +
' © 2015 ABC Company. All rights reserved. | Content for internal use only. | ' +
'<a href="mailto:#">Contact Us</a> ' +
' </footer>');
});
corresponding CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 40px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 40px;
background-color: #99FFFF;
padding-top:5px;
}
The footer displays correctly on most pages, however, on pages with sidebars, the sidebar overlaps the footer. I attempted to solve this issue by adding
margin-bottom: 40px; /* Margin bottom by footer height */.sidebar in the CSS, resulting in the layout below:
How can I fix this layout issue without having to manually style individual footers for each page?