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.