jQuery sticky footer
Question
James here! I've been trying for about two hours now to get a sticky footer, but I seem keep messing up the CSS. I'm looking for a script that jQuery can handle. I understand how most of the scripts work (which is surprising, since I'm just learning), but I need the script to work no matter what the height of the footer is, because it doesn't have a dynamic height set in the CSS file of my page. Would anyone be able to supply a working script for a sticky footer? I want the footer itself to always be at the bottom of pages, BUT NOT FIXED POSITION. The content element is #posts, and the footer area is a element with the ID of #bottom. Here is a page example: JTB Permalink Page
6 answers
solution1
2 2014-06-01 11:30:11
I'll just leave this here
<!DOCTYPE html>
<html>
<head>
<title>jQuery Sticky footer</title>
<!-- include jQuery -->
<script src="jquery-2.1.0.min.js"></script>
<!-- include our scripts -->
<script type="text/javascript">
$(function () {
// sticky footer
(function () {
var
$window = $(window),
$body = $(document.body),
$footer = $("#footer"),
condition = false,
resizing = false,
interval = 500
;
function positionFooter() {
if (resizing) {
setTimeout(function(){
if(resizing == false) {
positionFooter();
}
}, interval);
return true;
}
var
footer_position = $footer.css('position'),
body_height = $body.height(),
window_height = $window.height(),
footer_height = $footer.outerHeight();
if (footer_position == 'absolute') {
condition = body_height + footer_height < window_height
}
else {
condition = body_height < window_height
}
if (condition) {
$footer.css('position', 'absolute').css('bottom', 0);
}
else {
$footer.css('position', 'relative');
}
resizing = setTimeout(function () {
resizing = false;
}, interval);
return true;
}
$window.bind("load", function () {
positionFooter()
});
$window.resize(positionFooter);
}());
});
</script>
<style>
body {
text-align: center;
}
#header {
width: 100%;
background-color: green;
color: white;
height: 100px;
}
#footer {
width: 100%;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<header id='header'>
Header content
</header>
<div id='content'>
Content is here!
</div>
<footer id='footer'>
Sticky footer content
</footer>
</body>
</html>
solution2
1 ACCPTED 2012-03-26 20:01:18
Ok. HTML:
<div id="container">
<div id="wrapper">
<!-- CONTENT GOES HERE -->
</div>
<div id="footer">
<!-- FOOTER GOES HERE -->
</div>
</div>
CSS:
#container {
min-height: 100%;
position: relative;
width: 100%;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
padding-bottom: 206px; /* footer height, we will fix that with jquery */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
left: 0px;
height: 206px; /* footer height if any */
}
jQuery:
$(document).ready(function(){
var footer_height=$("#footer").height();
$("#wrapper").css({
'padding-bottom' : footer_height
});
});
I must warn you, jquery .height() function may not work properly so be careful with paddings and margins (just add margin/padding values to 'footer_height' and you should be fine).
solution3
0 2015-05-04 12:51:28
JQuery
function getWndowSize()
{
var windows_height=$(windows).height();
var current_height=windows_height-100;/*change values of 100 how much u need based on your requirement*/
$("#wrapper").css({'min-Height' : current_height});
}
Code:
<body onload="getWndowSize()">
<div id="container">
<div id="wrapper">
<!-- CONTENT GOES HERE -->
</div>
<div id="footer">
<!-- FOOTER GOES HERE -->
</div>
</div>
Just try it.because its working fine in my page.
solution4
0 2017-12-14 23:25:19
I know its too late to answe this question, but it was hard for me too and I was finding something in this great place, and I passed through this question and I would love to share one code helped me a lot.
You can find it in below demo.
I hope this can help someone as I always got help from other people here.
Thank you Stackoverflow.
$(document).ready(function(){ $(window).on("scroll", function() { var footer_height = $( "#footer" ).outerHeight(); var dim_height = $(".dim").outerHeight(); var scrollHeight = $(document).height(); var scrollPosition = $(window).height() + $(window).scrollTop(); if ((scrollHeight - scrollPosition) / scrollHeight === 0) { // when scroll to bottom of the page $(".dim").removeClass("dim-fixed"); $(".dim").addClass("dim-static").css({ 'bottom': footer_height, }); }else{ $(".dim").removeClass("dim-static"); $(".dim").addClass("dim-fixed").css({'bottom': 0,}); } }); }); //Document Ready function end
body { margin: 0px auto; background: #ffffff; font-size: 14px; color: #444444; font-family: 'Open Sans', sans-serif; font-weight: 300; } .point1 { width: 100%; margin: 0 auto; } .clearfix:before, .clearfix:after { display: table; content: " "; } #footer { z-index: 104; display: block; } footer.page-footer { width: 100%; background: #333333; color: #fff; border-top: 2px white solid; position: absolute; left: 0; } footer.page-footer > div { padding: 30px 0 40px; min-height: 162px; margin: 0 auto; position: relative; } nav.footer-menu { position: relative; float: left; width: 75%; padding-right: 30px; display: block; } nav.footer-menu > ul { margin-top: -3px; } body:not([class*="static-page"]) ul, body:not([class*="static-page"]) li { list-style: none; } nav.footer-menu > ul > li { display: inline-block; width: 33.33%; margin: 0; padding: 0; border: 0; } nav.footer-menu a { text-decoration: none; color:#fefefe; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 1.071em; padding: 0 10px 8px; vertical-align: top; display: inline-block; } .footer-data { font-size: 0.929em; color: #a0a0a0; overflow: hidden; } /* footer extra menu container*/ .dim-static { position: absolute; margin-left: auto; margin-right: auto; background: #ddd; */ left: 0; right: 0; width: 100%; text-align: center;} .dim-fixed { position: fixed; margin-left: auto; margin-right: auto; background: #ddd; */ left: 0; right: 0; width: 100%; text-align: center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <body> <section> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> <div>DEMO CONTENT </div> </section> <div class="dim"> Full width Footer menu </div> <footer class="page-footer" id="footer"> <div class="point1 clearfix"> <nav class="footer-menu"> <ul> <li><a class="active" title="stackoverflow.com" href="#">Home</a></li> <li><a rel="nofollow" title="Add a New Listing" href="#add-listing.html">Add a Listing</a></li> <li><a title="Search for property" href="#search.html">Search</a></li> <li><a rel="nofollow" title="About Us" href="#about-us.html">About Us</a></li> <li><a title="Contact us" href="#contact-us.html">Contact Us</a></li> <li><a title="My Favorites List" href="#my-favorites.html">Favorites</a></li> <li><a title="Terms of use" href="#terms-of-use.html">Terms of Use</a></li> <li><a title="Privacy Policy" href="#privacy-policy.html">Privacy Policy</a></li> <li><a title="FAQs" href="#faqs.html">FAQs</a></li><li><a title="Refund Policy" href="#refund-policy.html">Refund Policy</a></li> </ul> </nav> <div class="footer-data"> <div class="icons"> <a class="rss" title="Subscribe to RSS-feed" href="#" target="_blank"></a> <a class="facebook" target="_blank" title="Join us on Facebook" href="#"></a> <a class="twitter" target="_blank" title="Join us on Twitter" href="#"></a> </div> <div> © 2017, powered by <a title="stackoverflow.com" href="http://stackoverflow.com/">stackoverflow.com</a> </div> </div> </div> </footer> </body>
Also here, jsfiddle
In both demo, the Extra footer menu should stick only above the footer, with auto dynamic height, for some reason, its not shoiwng in booth demo but if you check the log, you will find what I'm talking about, and its 100% working fine in my websites.
You can do a lot with this, maybe you will add extra sub footer menu, or you will just convert your footer to be fixed/static according your document scroll status, and also you can play around and you will simply have static/fixed menu in very nice way.
I hope this will help any one else as I always got help from here. Thank you again to everyone.
Tariq
solution5
0 2012-03-26 20:01:56
I just created a page that has a sticky footer...
This creates a page with a header and footer that are 55px each and the footer sticks to the very bottom of the browser window
here's what I ended up doing:
HTML:
<!--main header container-->
<div id="header" class="ui-frame ui-frame-header"></div>
<!--main container for app-->
<div id="content" class="ui-mainContent">
This is a place holder for my content
</div>
<!--//main footer container-->
<div id="footer" class="ui-frame ui-frame-footer"></div>
CSS:
.ui-frame {
width: 100%;
height: 55px;
background: #000000;
font-family: Segoe UI, Arial, sans-serif;
color: #ffffff;
text-align: right;
vertical-align: middle;
font-size: 16px;
}
.ui-frame-header {
position: absolute;
top: 0;
}
.ui-mainContent {
position: absolute;
top: 55px;
bottom: 55px;
background: #ffffff;
font-family: Segoe UI, Arial, sans-serif;
}
.ui-frame-footer {
position: absolute;
bottom: 0
}
solution6
0 2012-03-26 20:07:32
If i understand you correctly there is no need for jQuery. Plain and simple...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.