3

I'm re-branding an Intranet publishing site for SharePoint 2013 using VS2012 - I'm creating project as a Feature and deploying the .wsp file locally.

Using IE9, short pages have no vertical scroll bar out of the box. This is causing a horizontal page jump when navigating between pages with vertical scroll bar and those without. I tried fixing it with variations of the following:

html
{
    height: 101%;
}

When I try the following, I get double vertical scroll bars on long pages:

html
{
    overflow-y: scroll;
}

My custom style sheet is correctly being applied last. However, I cannot understand why setting height to 101% is not inserting the vertical scroll bar.

UPDATE 12/09/13

I have even tried inlining the CSS height and this doesn't work wither:

<body style="height: 101%;">
    ...
</body>

However, I finally got scroll bar to render by inlining CSS as follows:

<div id="s4-bodyContainer" style="height:101%;">

Note Whitelaw's answer for explanation.

  • Do any of your HTML elements (i.e. the BODY) have a scroll="no" attribute? – John Chapman Dec 6 '13 at 21:57
  • No John, none that I can find. – IrishChieftain Dec 6 '13 at 22:09
3

In SharePoint, the main viewport of the webpage is not the html or body elements. Instead, they use div#s4-workspace, which is meant to take up 100% of the height and width (minus the ribbon).

Try adding your overflow-y to this element:

#s4-workspace {
    overflow-y: scroll;
}
  • 2
    This should work, but you can also just use #s4-workspace as the selector. The div portion of the selector is unnecessary. – RJ Cuthbertson Dec 7 '13 at 23:55
  • Thx, that worked! I was under the impression that I couldn't target #s4-ribbonrow, #s4-workspace, #s4-titlerow, #s4-bodyContainer directly because they were dynamically adjusted on page load? – IrishChieftain Dec 9 '13 at 17:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.