5

I need the site footer to sit across the bottom of the site at all times.

Currently, it sits across the site bottom when there is content on the page, but with no content on the page it (.site-footer) rises from the bottom to the middle of the visible page as represented in this image:

Footer in the middle of the screen

I was able to answer my own question and posted discovery process below:

7

A quick search shows this question has been asked and answered many times.

From StackOverflow: Make footer stick to bottom of page correctly

From StackOverflow: How to get the footer to stick to the bottom of your web page.

From CSS-Tricks: 5 different ways to make a sticky footer

From Code Pen: "Always on the bottom" Footer

From WordPress: How to make footer fixed to the bottom of the screen?

I used the WordPress answer for my answer:

.site-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;   
}

Footer properly stuck to site floor.

  • I tried using absolute to no avail, changing to fixed worked - however it does mean scrolling will keep footer fixed, which kinda sucks – user133490 Feb 9 '18 at 9:51
2

Add CSS for your footer, it will fix the position of footer to the bottom of the page.

    .site-footer{
     position:fixed;
     bottom:0px;
     left:0px;
     right:0px;
     width:100%;
    }
  • 1
    It will fix the footer position to the bottom – HeroWeb512 Oct 18 '17 at 5:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.