<script>
jQuery(document).ready(function($){
// FOOTER Height
var footerHeight = jQuery('footer').height() + 12;
jQuery('.site-content').css('margin-bottom', footerHeight);
jQuery(window).resize( function() {
footerHeight = jQuery('footer').height() + 12;
jQuery('.site-content').css('margin-bottom', footerHeight);
});
}); //end document ready
</script>
<style>
footer{left:12px; right:12px; bottom: 12px; position: fixed; z-index: 1;}
footer .site-info {padding:95px 95px 90px;}
</style>
<html>
<footer style="background-color:red">
<div class="site-info">
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</footer>
</html>
JS calculates the footer height based on the content in the footer and adds in the proper bottom margin based on the calculated height.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.