Making footer stick to bottom of pages

  • On pages that don’t have much content, my footer is floating in the middle of the page. How can I make it stick to the bottom, whatever browser or device is used?

    I’ve tried adding position:fixed; bottom:0; width:100%; to the footer css. This brought the footer to the bottom on pages with little content, but stuck it to the bottom of the screen on pages with more content, rather than having it after all the content so you have to scroll to it.

    An example of the problem is https://www.ohstenmarketing.com/about/ (zoom out to see what happens if on a laptop).

    I’ve looked at sticky footer guides, but I’m not sure how to go about adding the html they require.

    My website is https://www.ohstenmarketing.com. Any help would be much appreciated.

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

  • I normally will add a min-height to the main content area so make that area taller and then most of the time you won’t run into that problem. This fix is not adaptive to screen sizes though.

    PS. Your text is hard to read with the lines in the background.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    This tutorial works: https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

    Thread Starter Johsten

    (@johsten)

    Thanks dcrowe. I did the min height in em to make it more adaptive (on mobile, it doesn’t add any extra space, which is great). I’m looking for a way to stick the footer to wherever the bottom of the browser is, but this is a good interim solution.

    Thanks Andrew. I did have a look at that tutorial before. Like I said, the problem was working out the html – I don’t have a #container, and I don’t know how to add one, or what the existing equivalent on my site is called – meaning I can’t make any css changes to it.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Making footer stick to bottom of pages’ is closed to new replies.

Tags