CSS Sticky Footer for ASP.NET Master Page

by agrace 10. September 2008 16:15

Footer I searched for a long time for a simple CSS solution to the eternal "sticky footer" problem, where the footer goes down to the end of the page. Up to now I have resorted to JavaScript to achieve this, which is not really the most elegant solution. It should be simple, right?

The other day, I stumbled upon what looked like a basic HTML/CSS solution. I wanted CSS that would push the footer to the bottom of the page, irrespective of content height, in an ASP.NET Master Page setup. Thanks to Ryan Fait for this.

It was straightforward enough to get it working for IE7. Firefox 3.0 didn't play nice at first until I moved the wrapper and footer divs out to the master page. Feel free to download the sample below and try it out for yourself - VS 2008 solution. Ignore the red wigglies in the master page. It has been tested in IE7, Firefox 3.0 and Chrome 0.2.149.29.

CSS_Sticky_Footer.zip (19.91 kb)

UPDATE

With master pages you need to take account of the "form" element by including it in the appropriate CSS selector.

Tags: css, asp.net

Code Snippet: Master Page and Base PageCode Snippet:: Master Page and Base PageCode Snippet: Master Page Meta TagsI don't know about you, but as a Web Developer I sometimes find myself not doing the things I should...Beginning JQuery - Cool Menu with Master PageBeginning JQuery - Cool Menu with Master Page

Comments (13) -

agrace

9/18/2008 12:56:57 AM #

I've been doing some more testing with this and it seems like IE7 is the only browser that plays nice. Has anyone any ideas on this?

abishek

10/28/2008 12:39:48 AM #

hi can u send me the code snippet for adding a footer in a master page

agrace

10/28/2008 6:21:38 AM #

Abishek,

Have you tried the download link?

Anthony.

zx95tt

1/26/2009 1:21:25 PM #

The download link is broken. I'm running into the same problem and was looking to see if I could take a look at your solution.

Thanks

agrace

1/26/2009 5:22:04 PM #

Download link had been fixed

roger

7/30/2009 5:56:42 AM #

I'm seeing two problems here. The first is that when you moved the divs to the master page, they are inside the content area, and therefore never show up in the final html. Second, the problem in FF in the first place, it that it doesn't like the <form> element, and doesn't push the footer down with the <Form> present.

roger

7/30/2009 6:01:01 AM #

Some code in the master page:

<body>
    <div class="wrapper">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
        <div class="push">
        </div>
    </div>
    <div class="footer">
        <asp:ContentPlaceHolder ID="FooterPlaceHolder" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</body>

Seems to work much better.

Simon Harry

8/31/2009 12:29:18 AM #

"Second, the problem in FF in the first place, it that it doesn't like the <form> element, and doesn't push the footer down with the <Form> present."

You're right about this; just FYI, I fixed that problem by placing the starting <form> tag inside the 'wrapper' div rather than outside it. Since all your form elements are going to start after the 'wrapper' div of your master page, it should be fine to this.

Logo Design

9/21/2009 11:13:13 AM #

The good thing about your information is that it is explicit enough for students to grasp. Thanks for your efforts in spreading academic knowledge.

Miami web design

10/30/2009 9:50:35 PM #

Thanks for letting us download this cool stuff.. I'm sure that all of us are thankful here..

VE9A

11/29/2009 2:46:19 PM #

ummm that form tag problem can be fixed by simply adding 'form' to the stylesheet as follows

html, form, body
{
height: 100%;
}

I haven't fully tested it yet but it seems to work