Home » Jquery » javascript – Position footer always on viewport bottom

javascript – Position footer always on viewport bottom

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have a footer that contain the user name. I want to show it always on the bottom of the viewport. Like a fixed bottom bar but only on my sidebar.

I use the function

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;

    $('#footer').css('margin-top', (docHeight - footerTop) + 'px');

    $('#footer').removeClass('invisible');
}

this inside:

$( function () {
    setFooterStyle();
    window.onresize = setFooterStyle;
}

But because I use a sidebar I thing the margin-top will place the footer the amount of pixel under the sidebar and not under the page top. So it is somewhere at the bottom of the document and I have to scroll to see.

Any idea what I do wrong to keep the text always on the bottom of the viewport, while resize ans while scroll?

How to&Answer:

The general term for what you are trying to do is “Sticky Footer”. The trick is to make a wrapper div for your content above the footer that takes up 100% of the height of the viewport, then to use negative margins on the footer to move it up the same amount as the height of the footer. Then the footer is always at the bottom of the viewport. Then you need to add padding to the bottom of the content so that it never gets covered by the footer, now that the footer is not taking up space in the regular flow of the layout.

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

https://css-tricks.com/couple-takes-sticky-footer/