Footer doesn't appear at the bottom of browser

  • Resolved fudgeyeh

    (@fudgeyeh)


    11 years, 5 months ago

    Hi,

    I’m using google chrome and I noticed that when a page has little content, the footer will appear at where the content ends rather than at the bottom of the browser window.

    Can either of these options be done?

    1. have the footer fixed at the bottom of the browser when the page has little content and at the bottom of the page when the page has enough content for scrolling to be necessary.

    2. Remove the black footer completely. No black box or any text etc.

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

  • You can have a fixed footer with this CSS code

    #footer {
    bottom: 0;
    height: auto;
    position: fixed;
}
#content:after {
    content: "";
    display: block;
    height: 100px;
}

    or specify a minimum height for the content area

    #content {
min-height: 400px;
}
    Thread Starter fudgeyeh

    (@fudgeyeh)

    Hi Jesin,

    I really like the 2nd solution that you suggested. However, The homepage is still unchanged.. All other pages are corrected by the code. Do you know how the home page can be corrected such that there is a minimum height as well? All I have on my home page is the slider in the content area.

    Thanks! I really appreciate your help

    Thread Starter fudgeyeh

    (@fudgeyeh)

    Hey Jesin,

    anyway, I tried using the first code and applied it to the home page and seems to work:

    .home #footer {
    bottom: 0;
    height: auto;
    position: fixed;
    }
    #content:after {
    content: “”;
    display: block;
    height: 100px;
    }

    Thanks

    Cheers~

    If you could post your site’s URL I can tell you why it isn’t applying to the home page.

    Thread Starter fudgeyeh

    (@fudgeyeh)

    https://www.slimhealthysingapore.com

    Thanks Jesin~

    The second solution doesn’t work on the home page because there is no element with the ID “content”, so use this for the home page.

    #frontpage {
min-height: NNpx;
}
    Thread Starter fudgeyeh

    (@fudgeyeh)

    Thanks Jesin,

    I’ve learnt something today. Really Appreciate your help. =)

    Cheers~

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Footer doesn't appear at the bottom of browser’ is closed to new replies.