I have used this link for setting the footer, it's working fine. I do not want to change it.
I have provided some background color to quick launch, but when content is less than the page height, a gap appears in between the quick launch and footer, how can I avoid it. Please refer the below image:
enter image description here

Anyone having any idea, please share.


  • Maybe you could try changing the height property of the Navigation Box to achieve your aim: <style type="text/css"> /*Change QuickLaunch Height */ #sideNavBox {height: 100px;} </style>
    – SteffPoint
    Commented Jun 13, 2016 at 9:35
  • I cannot add the height in pixel, as I want it to be responsive.
    – Joseph
    Commented Jun 13, 2016 at 9:52

2 Answers 2


That depends largely on your masterpage and your stylesheet. From your screenshot it looks almost as if the 35px bottom-padding of #s4-bodyContainer is causing this gap (assuming that this value in your stylesheet is not different from the default value).

You could try that:

#s4-bodyContainer { padding-bottom: 0 !important; }


I cannot say it as an answer, but it is a workaround that worked for me. here it is:

$( document ).ready(function() {

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.