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)

kick it on DotNetKicks.com  PHP, ASP, .NET, JSP Resources, Reviews

Tags: ,

ASP.NET | CSS



Comments (13) -

agrace
agrace United States
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
abishek India
10/28/2008 12:39:48 AM #

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

agrace
agrace United States
10/28/2008 6:21:38 AM #

Abishek,

Have you tried the download link?

Anthony.

zx95tt
zx95tt United States
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
agrace United States
1/26/2009 5:22:04 PM #

Download link had been fixed Smile

roger
roger Spain
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
roger Spain
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
Simon Harry Ireland
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
Logo Design United States
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
Miami web design United States
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
VE9A Australia
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

Company Logo Design
Company Logo Design United States
12/20/2011 6:10:09 AM #

Thanks a lot for sharing...And letting us download...Really nice post...

Garv
Garv India
1/30/2013 11:22:20 PM #

There is only one page in a project but it is working. foot sticky dll is a nice peice of code.

Pingbacks and trackbacks (1)+

Add comment




  Country flag
biuquote
  • Comment
  • Preview
Loading