Issue with div "s4-workspace" and scroll bar


  • Hi,
    I have a standard publishing site, I just added an horizontal menu (the publishing site doesn't have it) but I'm experiencing a strange behavior:

    With my custom menu the div "s4-workspace" shifts down by the height of the menu and I cannot see the end part of the page content.
    I noticed this because I was looking at the workspace right scroll bar and I could not see the end.

    I copied my horizontal menu from the Team Site, where the menu is scrolling inside the workspace, but I want to keep it fix under the ribbon.

    I guess that it's a div displacement problem, but I could not find anything to fix it. I opened the nigthandday.css and the core4.css looking for some CSS style property, but nothing...

    This is what it looks like:

    <!-- Ribbon end -->
      <!-- my custom menu -->
    <div id="s4-workspace">

    Any help?

    Thank you,

    Wednesday, November 3, 2010 4:44 PM


  • If you look at the page, you will notice that the whole page doesn't scroll by default.  Only the S4-workspace and below scrolls.  This is done through the use of a Javascript.  Your problem is that you have inserted something between the div's at the top of the page and the S4-workspace div.  The javascript isn't aware of that and so it's not factoring in that height when it calculates how to scroll the page.  So you can never reach the bottom.

    To fix it you need to either remove the factors that cause the partial page scrolling and scroll the whole page or insert your menu into either the top of the s4-workspace div or one of the other existing div's at the top of the page.  Take a look at the following article for a more indepth explanation.

    Paul Stork SharePoint Server MVP
    • Marked as answer by Nicola77 Wednesday, November 3, 2010 5:12 PM
    Wednesday, November 3, 2010 5:00 PM

All replies