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 Jun 13 '16 at 9:35
  • I cannot add the height in pixel, as I want it to be responsive. – Joseph Jun 13 '16 at 9:52

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, privacy policy and cookie policy

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