The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Sticky footer sits below window height

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #37853


    I’ve looked around and read all the sticky footer guides, both CSS and Jquery. The problem is, every technique I use makes the footer sit below the window height. I have to scroll to see it.

    There is probably something in my existing code interfering with it. Can anyone help?

    Jquery technique:

    if($(document.body).height() < $(window).height()){
    position: 'absolute',
    top: ( $(window).scrollTop() + $(window).height()
    - $("#footer").height() ) + "px",
    width: "100%"
    } else {
    position: 'static'

    CSS technique :


    footer {
    background-color: #F1F1F1;
    border-top: 1px solid #CCC;
    height: 80px;
    text-align: center;
    width: 100%;

    © Blah


    For the CSS technique, there is so much more to it that just using the coe you have provided. For example, I don’t even see a negative top margin?

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.