Tuesday 9 June 2009

CSS Sticky Footer in ASP.NET

One of the features that almost every web page in a RIA needs is a footer, this is not from a predefined RIA template but from observations of sites which already exist.

Trying to create a web page which pushes down content to form the footer at the bottom of the page without fail, regardless of content and browser window size can be tricky however there is one solution which sticks out, the CSSStickyFooter solution.  The CSSStickyFooter site contains the CSS which is used to apply the style and details on how you need to construct your HTML to take advantage of this.

I am overjoyed by the solution and I am really enjoying the ability to have a footer which sticks to the bottom of my page, however as an ASP.NET developer I was almost disappointed when I found that the CSS did not work for ASP.NET pages until I realised the solution.

Open your sticky footer CSS file and make the following changes;

Change

html, body, #wrap {height: 100%;}

To

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

As you can see the form tag has now been added to the list of elements which gain a 100% sizing, all ASP.NET pages are wrapped in a form element.

Finally change;

body > #wrap {height: auto; min-height: 100%;}

To

form > #wrap {height: auto; min-height: 100%;}

As the form element wraps our content we need to specifically select the #wrap element, child of form (not body) and apply the styling to make the sticky footer work.

I hope this has help fix the small issues in getting this to work in ASP.NET pages.

4 comments:

Anonymous said...

I Lord! It has happened!
I found the solution! )))
Thank for you tribute!

Anonymous said...

Awesome ! Works perfect. Thanks for the solution

Brett said...

You my friend are a genius! I've been looking at all the footer css stuff out there and none of it worked for me - their samples always worked though. I came across the css sticky footer last night and it worked in IE but I couldn't get firefox to work. This morning I found your post, added the form tag to my stylesheet and it's working in FF and IE!

hendrik said...

Hell yes. Wasted a complete day with try & error before i googled: ASP sticky footer.

Made my Evening!