I am trying to get the quick launch to fill the screen height.

This does not work:

    .ms-quickLaunch {
    background-repeat: repeat-x;

Does anyone have any tips?

1 Answer 1


Untested across the whole gamut of browsers, but if you're using the OOTB DOM, you have to do much more than just set the quick launch height. The #s4-leftpanel-content div contains the content and background color of the quick launch, so this has to be given a height of 100% (which sizes it to the height of the #s4-leftpanel div. #s4-leftpanel needs to be given a height of 100% to size it to the height of #s4-mainarea, and now you've hit the roadblock.

#s4-mainarea does not fill the screen, it sizes to fit the content. Furthermore, you can't just give this element a height of 100% because it's floated inside #s4-bodyContainer and contained within #s4-workspace. The workspace element is the element that scrolls your content, and receives inline style attributes as part of the onload JavaScript to size it correctly, but again, this is not 100% in height, because it's calculated as available screen real estate minus the height of the ribbon.

You could set it dynamically on load with jQuery (grab height of #s4-workspace and set the min-height of s4-leftpanel-content to that value), but that often leaves the awkward pause between the time the page renders and the time the bar snaps to the correct size... not the best user experience.

If you were to disable the OOTB scrolling behavior, then things may get easier, but IMHO realistically you need to rework quite a bit of the default DOM structure to make a 100% dynamic quick launch a viable option. There's not a (great) solution to it without doing a fair amount of rework. You're not going to find a couple lines of magic CSS to pull it off--at least not without disabling the native SharePoint scrolling.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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