sticky footer coming in between of Setting Page

Question

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:

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

customFooter{

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.

Answer 1

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

Answer 2

Friends thanks for you respond...

I'hv got it done by this Jquery:

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

                    //change footer with window resize
                    $(window).resize(calcFooter);
                });

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

                    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
                    if(ribbonheight==null){
                        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
                    $footer.show();
                }