CSS Sticky Footer for ASP.NET Master Page

September 10, 2008 16:15 by agrace

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)

Tags: css, asp.net
Categories: ASP.NET | CSS
Actions: E-mail | Permalink | Comments (12) | Comment RSS RSS comment feed

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

Comments

September 16. 2008 21:33

Trackback from DotNetKicks.com

CSS Sticky Footer for ASP.NET Master Page

DotNetKicks.com

September 18. 2008 00:56

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?

agrace

October 28. 2008 00:39

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

abishek

October 28. 2008 06:21

Abishek,

Have you tried the download link?

Anthony.

agrace

January 26. 2009 13:21

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

zx95tt

January 26. 2009 17:22

Download link had been fixed

agrace

July 30. 2009 05:56

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

July 30. 2009 06:01

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.

roger

August 31. 2009 00:29

"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.

Simon Harry

September 21. 2009 11:13

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

Logo Design

October 30. 2009 21:50

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

Miami web design

November 29. 2009 14:46

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

VE9A

Add comment