Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: jQuery Codes Library >> jQuery Templates >> CSS & jQuery Sticky Footer


Code Snippet </> Info


Snippet Name: CSS & jQuery Sticky Footer

Description: This document describes how to make a footer that sticks to the bottom of the page even if the page content is less than the browser window height, so that you do not have a footer appearing in the middle of the browser window.
Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-08-26 23:47:02

Language: html

Highlight Mode: html

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<html> <head> <title>CSS & jQuery Sticky Footer</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> html, body {margin:0px; padding:0px; font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);} #wrap {min-height:100%;} #main {overflow:auto; padding-bottom:150px;} /* must be the same height as the footer */ #header { position:relative; padding:10px; height:60px; background-color:#e6e6e6; } #content {padding:5px 10px 5px 10px;} #myfooter { position:relative; margin-top:-150px; /* negative value of the footer height */ height:150px; /* designate the footer height */ background-color:#e6e6e6; clear:both; } /*Opera Fix*/ body:before { content:""; height:100%; float:left; width:0px; margin-top:-32767px;/ } </style> <!--[if !IE 7]> <style type="text/css"> #wrap {display:table; height:100%;} </style> <![endif]--> <script> <!-- // Begin CSS & jQuery Sticky Footer // == This Script Free To Use Providing This Notice Remains == // // == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == // // == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == // // == Code pieced together from http://www.cssstickyfooter.com/using-sticky-footer-code.html and http://www.codicode.com/art/the_best_sticky_footer.aspx == // function positionFooter() { var mFoo = $("#myfooter"); if ((($(document.body).height() + mFoo.outerHeight()) < $(window).height() && mFoo.css("position") == "fixed") || ($(document.body).height() < $(window).height() && mFoo.css("position") != "fixed")) { mFoo.css({ position: "fixed", bottom: "0px" }); } else { mFoo.css({ position: "static" }); } } $(document).ready(function () { positionFooter(); $(window).scroll(positionFooter); $(window).resize(positionFooter); $(window).load(positionFooter); }); // --> </script> </head> <body> <div id="wrap"> <div id="main"> <div id="header"><center>This is your header with height set to <code>height:60px;</code></center></div> <div id="content"> <p>This Sticky Footer code needs jQuery and will position the element footer with id myfooter at the bottom if the page length is shorter than the browser window length and will place it in the normal flow if the page is longer or equal to the browser window length.</p> <p>.NET Ajax UpdatePanel & the Sticky Footer</p> <p>If you're a .NET developer and using the ScriptManager and Ajax UpdatePanels you'll need a call to the javascript fonction positionFooter() after an ajax partial postback, because the page length will change when the updatepanel updates its content. So just add this code to the page or master page where your Update panel is defined, Just change "up1" with your UpdatePanel ID :</p> <code>if (IsPostBack)<br /> {<br /> ScriptManager.RegisterStartupScript(up1, up1.GetType(), "ppf", "positionFooter();", true);<br /> }<br /> </code> </div> </div> </div> <div id="myfooter"><br /><center>This is your footer content with height set to <code>height:150px;</code></center></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <br /><br /> <div id="snippet"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_194.html">CSS & jQuery Sticky Footer</a> page. ] </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library