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.

7 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!

rosy said...

i like ur website. thanks for this comment posting...
web development

綠色 said...

我是天山,等待一輪明月。.........................

逛街 said...

成人圖庫,口交技巧,成人18,自慰方法,Fleshlight,情色自拍貼圖,成人情色貼圖,少婦自拍,一夜情聊天,本土av,色情av,av圖片,色情聊天,成人情色網,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,080視訊聊天室icandy,情色少女貼圖,免費視 訊聊天網,av女優18,免費線上視訊fm358,avdvd免費AV女優,女優王國,做愛,無碼影片,情色交友