Making footer stick to the bottom

  • Making footer stick to the bottom
    Viewing 10 posts - 1 through 10 (of 10 total)

  • Volkan
    Participant
    #2639

    Hello Omar,

    A few pages that are short on content result on a footer that appears in the middle of the page. Under the footer is a white space. Can you help me with this? I have tried it for myself with some tutorials, but it is quit difficult.

    Here a screenshot by what I mean:

    Thanks a lot!


    Omar
    Keymaster
    #2645

    Hey Volkan,

    I was able to solve this tricky issue with CSS and jQuery

    First added the following CSS to the footer
    #circleFlipFooter{
    position: absolute;
    bottom: 0;
    width: 100%;
    }

    to stick it to the bottom, but this would require you add this jQuery to keep the footer on bottom on full content pages as well, so setting the <html> height to match the height of the whole document.

    jQuery(‘html’).height(jQuery(document).height())

    Hope you like the outcome,
    Cheers.


    Volkan
    Participant
    #2646

    Very interesting! It seems like it worked! But it has caused on the home for 2 errors.

    1) there is a white gap under the news blog
    2) the homepage is wider so there is a white space/line on the left (you could also move the site with the scroll bar)


    Volkan
    Participant
    #2649

    Sometimes it is on the footer for example


    Omar
    Keymaster
    #2651

    Hello Volkan,

    I now understand the bug more, please give me some time and I will update you soon.

    Regards.


    Volkan
    Participant
    #2670

    Sure Omar. I removed the css and jQuery for now, because it looks very buggy. So that you are aware of it.

    And I think I fixed the horizontal scrollbar to hide by setting margin-left; 90px tot 80px in:

    @media (min-width: 979px) {
    #urpavies-icon-box, #urpadvies-nieuws {
    padding-left: 80px;
    }
    }

    I hope it not affects other things.


    Omar
    Keymaster
    #2677

    Hey Volkan,

    Problem fixed by adding
    jQuery(document).ready(function($){
    var html_h = parseInt($(‘html’).height());
    var window_h = parseInt($(window).height());
    if(window_h > html_h){
    $(“footer”).addClass(‘stickyFooter’);
    }else{
    }
    });

    Please check and give me your feedback.
    and No your change will not affect anything else 🙂
    Cheers.


    Volkan
    Participant
    #2684

    Nice Omar, thanks! The footer sticks at the bottom, but it creates a white gap between the products and footer on the ‘Diensten’. It is not a huge problem (I see it only on my tablet, didn’t test it at bigger resolutions), but if it is not much asked or much effort, maybe that you could look at it?


    Volkan
    Participant
    #2685

    Actually, there is another error on the page. I run the plugin ‘wp popup’ on the ‘diensten’ page, when the popup appears there does also appear a white space under footer:

    First I didn’t saw the bug, because the plugin deactivated himself.


    Volkan
    Participant
    #2721

    Problem solved! I decided to add some widgets the footer. The footer got larger and filled the space. Now it works also on tablet. Thanks for al the help Omar!

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Making footer stick to the bottom’ is closed to new replies.