Sticky footer solution


Current Issue

So every time I do a new master page with a footer, I am stuck with a page that has no content and the footer is floating way above the bottom of the page.

This is using the OOTB V4.master (a copy of course), and my footer placed right above the Developer Dashboard so it’s the last thing inside the #s4-bodyContainer.

(Style put inline for demonstration purposes)

Even if you go outside the #s4-bodyContainer and place the footer, as the last element in s4-workspace you’ll get the same effect. (I’ve added comments this time to show where I am in the master page)

If you go below the s4-workspace, you will get a very undesirable effect, because SharePoint only detects things inside the workspace and uses that to resize the page. SO you’ll see your footer for a second then it will be pushed out of frame!

Solution

Again as stated in the problem statement, many of the solutions you’ll find rely on jQuery. This one is in JavaScript so that you don’t have to worry about loading that jQuery library. This solution will analyze the size of the view space and adjust the body container taking in considers of the height of the footer, the ribbon & itself.

Step 1) To utilize this script the placement of your footer must be between the s4-bodyContainer & s4-workspace.

Step 2 ) Download the JavaScript file here.

Step 3 ) Add the js file to your SharePoint site

Step 4 ) Add the reference in the Master Page, somewhere before the </head> tag

Once you complete all the steps your footer will now be properly placed at the bottom of a short page. It will even update itself when the page is stretched or shrunk.

 Credit to :  http://tommdaly.wordpress.com/2012/02/01/my-sharepoint-2010-sticky-footer-solution-2/

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: