Forums

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
    Posts
  • #37853
    IndieHaz
    Member

    Hi,

    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()){
    $('#footer').css({
    position: 'absolute',
    top: ( $(window).scrollTop() + $(window).height()
    - $("#footer").height() ) + "px",
    width: "100%"
    });
    } else {
    $('#footer').css({
    position: 'static'
    });
    }

    CSS technique :https://css-tricks.com/snippets/css/sticky-footer/

    Footer:


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



    © Blah


    #102016
    TheDoc
    Member

    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.