I've put my sticky footer page in master page and it has gone well but when I opened my Setting page it has shown there like this:

here is the Screen Shot of my page.

please tell me how can overcome with this problem. I want footer in bottom of the each page. My Css is:


background-color: rgb(28, 108, 169);
position: absolute;
bottom: 0;
width: 100%;
padding-top: 5px;
text-align: center;
min-height: 19px;


if I use Relative it comes in between as currently my HomePage has only two links. Footer coming in Between

  • Post the CSS you used for the footer. Jan 10, 2015 at 13:05
  • Hi Amal..i have mentioned my CSS in post..customFooter is my DIV which I am showing in Bottom.
    – dpk
    Jan 12, 2015 at 7:49

2 Answers 2


Since the position is "absolute" the footer will not "be pushed down" according to the content size. You need to use "relative" instead.

This thread talk about simlilar issue. For your reference please: where is the right place to add a footer for my seatle.master

  • please see I have added screenshot in my post. If I chose relative it comes fine in Settingpage by it comes in between in my HomePage as my home has only Two Links for now.
    – dpk
    Jan 13, 2015 at 9:23
  • Please refer to eliostruyf.com/sticky-footer-solution-for-sharepoint-2013
    – Mark L
    Jan 14, 2015 at 1:13
  • Also notice that your site setting page and homepage may refer to two different Master pages. Check it at Site setting > Master page
    – Mark L
    Jan 14, 2015 at 1:14

Friends thanks for you respond...

I'hv got it done by this Jquery:

$(document).ready(function() { calcFooter();

                    //change footer with window resize

function calcFooter(){
                    var $footer = $("#customFooter");
                    var footerheight = $footer.outerHeight();
                    //hide footer allows for smoother window resizing

                    var bodyheight = $("#s4-bodyContainer").outerHeight();
                    var $ribbon = $("#ms-designer-ribbon")
                    var ribbonheight = $ribbon.outerHeight();
                    var windowheight = $(window).height();

                    //if ribbon is hidden size is zero
                    if($ribbon.css('display') == 'none'){
                        ribbonheight = 0;

                    //if no ms-designer-ribbon try to calculate with suitebar + ribbonrow
                        ribbonheight = $("#suiteBar").height() + $("#s4-ribbonrow").height();

                    //handle null if something wasn't found
                    ribbonheight == null && (ribbonheight = 0);

                    //if content is less than the window size add margin to customFooter
                    var difference = windowheight-(bodyheight+ribbonheight+footerheight);
                    if (difference > 0) $('#customFooter').css('margin-top', difference);

                    //show footer after calculating

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.