| CSS & jQuery Sticky Footer - 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 |
<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>
|
Scroll