Search code examples
javascripthtmlcssfooterbottomnavigationview

Footer on bottom POSITION ABSOLUTE WILL NOT WORK

I am designing a webpage with some per-defined styles.I would like to bottom align the footer so that when you load into the site it looks normal. When i try to do this by using "bottom:0;position:absolute" it works on desktop, but when you switch to mobile or laptop it overrides the other content and shows on top of it. I am attaching pictures: Mobile, Laptop, and what it's supposed to look like; Laptop.

Any help would be greatly appreciated.

Solution

  • use position bottom:0 only if body height less then window height.

    if ($(document.body).height() < $(window).height()) {
    $('#footer').attr('style', ' position: absolute; bottom: 0;left: 0; right: 0;');
}