Introduction

This article explains how to use a sticky footer and how to use the sticky footer in an ASP.NET Master Page.
Step 1

Open your Visual Studio then select Add New Project then select Add Master Page >> Add ASPX Page.
Step 2

Now open your Master Page and add this script within the head tag.
  1. <head>
  2. <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
  3. <script type="text/javascript">
  4. $(window).bind("load", function () {
  5. var footer = $("#footer");
  6. var pos = footer.position();
  7. var height = $(window).height();
  8. height = height - pos.top;
  9. height = height - footer.height();
  10. if (height > 0) {
  11. footer.css({
  12. 'margin-top': height + 'px'
  13. });
  14. }
  15. });
  16. </script>
  17. </head>
Step 3

Then write the following div within your form:
  1. <form id="form1" runat="server">
  3. <div>
  5. <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
  7. </asp:ContentPlaceHolder>
  9. <div id="footer">
  10. Your Footer Content
  11. </div>
  13. </div>
  14. </form>
Step 4

Open your aspx page (for example default.aspx). Call your master page in your aspx page.
  1. <%@ Page Title="" Language="C#" MasterPageFile="Master.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="StickyFooter.default" %>
Step 5

Remove all HTML elements from your default.aspx page. And add your content placeholder on your default.aspx page.
  1. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  3. Main Content (Header Content)
  5. </asp:Content>
Now you can view your footer text at the bottom.

Output

The mail content Header

your footer content

Full example
Master Page (C#)
  1. <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Master.master.cs" Inherits=StickyFooter.Master" %>
  3. !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <title></title>
  8. <asp:ContentPlaceHolder ID="head" runat="server">
  9. </asp:ContentPlaceHolder>
  10. <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
  11. <script type="text/javascript">
  12. $(window).bind("load", function () {
  13. var footer = $("#footer");
  14. var pos = footer.position();
  15. var height = $(window).height();
  16. height = height - pos.top;
  17. height = height - footer.height();
  18. if (height > 0) {
  19. footer.css({
  20. 'margin-top': height + 'px'
  21. });
  22. }
  23. });
  24. </script>
  25. </head>
  26. <body>
  27. <form id="form1" runat="server">
  29. <div>
  31. <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
  33. </asp:ContentPlaceHolder>
  34. <div id="footer"> Your footer content </div>
  35. </div>
  36. </form>
  37. </body>
  38. </html>
Default.aspx (C#)
  1. <%@ Page Title="" Language="C#" MasterPageFile="Master.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="StickyFooter.default" %>
  2. <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  3. </asp:Content>
  4. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  5. The main content (Header)
  7. </asp:Content>