Fixed ribbon and scroll bar issues.

The new Ribbon functionality in SharePoint 2010 can cause some frustration when creating custom master pages. The trick is to develop a master page with the ribbon always on top of your page without losing functionality and keep the content scrolling working correctly. Sometimes the scroll bars seems to grow outside the browser window leaving the end-user unable to scroll to the bottom of the page. Chances are that you forgot some HTML in the master page.

How does it work?

SharePoint 2010 fixes the Ribbon to the top of the page using CSS.  In order to display the scroll bars correctly a JavaScript runs to update the height of certain HTML elements. It does this by dynamically adding the style attribute to the targeted HTML tag. So in order the have a fixed ribbon with correct scrolling content you need:

  • JavaScript to calculate content height
  • A <div> element containing the ribbon
  • A <div> element containing the actual SharePoint content
  • Some CSS to hide / display the correct scroll bars

Luckily most of this functionality is already build-in in SharePoint 2010. You need to make sure that when creating a custom master page you include the correct HTML elements and JavaScript pieces. Here is how.

Adjust the master page.

For this tutorial I assume you are confident with HTML, you know what a master page is and how to edit a CSS file in a SharePoint environment.

Open your master page and look for the body tag. Add the attributes scroll=”no” and class=”v4master” to the body tag. So you get the following.

<body scroll=”noonload=”...” class=”v4master>

Leave the onload attribute as is.

Next make sure that in your HTML you have a <div> element to contain the ribbon. Do this by adding the following HTML element to your master page.

<div id=”s4-ribbonrowclass=”s4-pr s4-ribbonrowhidetitle>

If SharePoint finds this <div> element it will inject the Ribbon at this place.
Immediately after the closing tag of the above <div> ,  add the following div elements.

<div id=”s4-workspace>
   <div id=”s4-bodyContainer> 

      <!-- Your content goes here -->


The s4-bodyContainer will be your main working pane. Add all your layout code, navigation, webpartzones, SharePoint controls, etc… go in this div element.
Finally you need to add the JavaScript that will dynamically calculate the height of the s4-workspace. Do this by adding the following JavaScipt code in the <HEAD> of your master page

<script type=”text/javascript>
var _fV4UI = true;

To be correct: this is not actually a script. You just declare a variable. The _fV4UI indicates  to SharePoint that the page is a version 4 type master page ( version 4 =  SharePoint 2010 master pages).

The CSS.

All the necessary elements for your fixed ribbon, scrolling content SharePoint page are now in place.  Add these CSS styles to display or hide the scroll bars on the correct <div> elements.

body #s4-ribbonrow {
     background-color: lime;
     overflow-y: hidden;
     min-height: 43px;

body s4-workspace {
   overflow-y: scroll;
   overflow-x: hidden;
body #s4-bodyContainer {
   width: 760px;

I added a fancy green color to the ribbon to make the changes more visible. Play a little with the CSS until you are satisfied with the result.

Happy branding..


  1. bkwdesign

    May 13, 2011

    I have a SharePoint 2010 site that is using the out-of-the-box master page. However, I am trying to display the EditForm.aspx and DispForm.aspx dialog pages within the context of a custom 3-panel frameset (big left-hand frame shows the actual document stored in the library, upper right frame shows the aforementioned dialogs, lower right shows a business web app not related to SharePoint)

    The particular frame that is hosting my dialogs is set to scrolling=”yes”

    However, I cannot get my dialogs to display a scroll in this frame no matter what I try. (well, everything works just fine in FireFox when I use the following jQuery to adjust my styles). I think it’s something peculiar to MSIE 8

    $(‘#s4-workspace’)[0].style.position = ‘inherit’;
    $(‘#s4-workspace’)[0].style.overflow = ‘inherit’;
    $(‘body.v4master’)[0].style.overflow = ‘inherit’;

  2. bkwdesign

    May 13, 2011

    Ah-hah! After re-reading your article I added this line to my jQuery onload function and now everything renders as I need it to within my frameset! (in Firefox AND MSIE)

    $(‘body’)[0].scroll = ‘yes’;

    I’ve been doing web development for a dozen years and have yet to come across this stupid SCROLL attribute! Thanks again for your post!

  3. DaHey

    September 11, 2012

    Great article. Is there a way to hide the #s4-ribbonrow background color when a user clicks Site Actions -> Hide Ribbon?

  4. maiomar86

    September 29, 2012
  5. aaa

    March 13, 2013

    Nice Work…Thankx a lot…

  6. Ondrej

    May 3, 2013
Comments are closed. ×

Share Your Thoughts