🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The jQuery sticky footer plugin sticks your footer, with or without set height, to the bottom of your page. You can also use the sticky footer plugin to stick other elements to the bottom of their parent.

Plugins

Documentation

jQuery.stickyFooter

The jQuery sticky footer plugin sticks your footer, with or without set height, to the bottom of your page. You can also use the sticky footer plugin to stick other elements to the bottom of their parent. Check the demo for more information.

Example

HTML

<html> 	<body> 		<div id="page"> 			<p>Content</p> 		</div> 		<div id="footer"> 			<p>Footer</p> 		</div> 	</body> </html>

CSS

.sticky-footer { 	position: absolute; 	bottom: 0; 	width: 100%; }

Javascript

$(window).load(function() { 	$("#footer").stickyFooter(); });

Options

$("#footer").stickyFooter({ 	// The class that is added to the footer. 	class: 'sticky-footer',  	// The footer will stick to the bottom of the given frame. The parent of the footer is used when an empty string is given. 	frame: '',  	// The content of the frame. You can use multiple selectors. e.g. "#header, #body" 	content: '#page' });

You May Also Like