Web developer tutorial: Sticky Footer

Introduction

Now i am going to explain how to create sticky footer with asp.net master page in simple manner.

Step 1
Add new visual studio project and add the necessary files like shown blow.

Step 2
Now open your Master Page and add this script within the head tag.

<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>  
   <script type="text/javascript">  
       $(window).bind("load", function () {  
           var footer = $("#footer");  
           var pos = footer.position();  
           var height = $(window).height();  
           height = height - pos.top;  
           height = height - footer.height();  
           if (height > 0) {  
               footer.css({  
                   'margin-top': height + 'px'  
               });  
           }  
       });  
</script>  
</head>

Step 3
Then write the following div within your form tag:

<form id="form1" runat="server">  
     
 <div>  
  
           <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">  
  
           </asp:ContentPlaceHolder>  
  
                     <div id="footer">  
                     Your Footer Content  
                      </div>  
  
 </div>  
 </form>  

Step 4
Open your aspx page (for example default.aspx). Call your master page in your aspx page.

<%@ 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.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">  
  
Main Content (Header Content)  
  
</asp:Content>  

Now you can view your footer text at the bottom.

Web developer tutorial

Thursday, 21 April 2016

How to create sticky footer with asp.net master page?

Blog Archive