Post
Ask Question

Sticky Footer in Master Page Using ASP.Net

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">  
  2.      
  3.  <div>  
  4.   
  5.            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">  
  6.   
  7.            </asp:ContentPlaceHolder>  
  8.   
  9.                      <div id="footer">  
  10.                      Your Footer Content  
  11.                       </div>  
  12.   
  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">  
  2.   
  3. Main Content (Header Content)  
  4.   
  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" %>  
  2.   
  3. !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  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">  
  28.      
  29.    <div>  
  30.   
  31.     <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">  
  32.   
  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)  
  6.   
  7. </asp:Content>


Similar Articles