Question 166050 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Why isn’t WordPress footer menu showing at bottom of short pages?

My website is thoughtshouts.com running on WordPress using VOICE THEME (by Meks). For some of the pages that are short, the footer appears in the middle of the screen for all devices. I explored some other websites too running on the same theme but not witnessed the same issue. I am skeptical that this might be some issue with WordPress or theme compatibility, not very sure. I explored help forums giving a common remedy setting as

.site-footer{
    position: absolute;
    bottom: 0px;
}

After making the above CSS change, this works for that particular page where the issue is, but for other website pages, the footer comes somewhere in between content overlapping the content screen. I wish the footer to fixed at the end of every page, posts where it only appears when content is scrolled to the last.

Problem Page link: https://thoughtshouts.com/publish-content/

Please guide me with the required code to fix this issue.

Tags:

2

Answers


  1. 0

    This isn’t really an issue with your sites codes or CSS.
    This template like many other themes that use best practice headers and footers to house content wraps the headers and footer around the content of the page.
    The real issue here is the content in your page.

    Can I suggest that you re think your approach to the UI of this page such as the following:

    • Increasing the padding above and below your main content
    • Add more content to the page to increase the body height
    • By default show the login form on this page so regular users dont have to click Login. Then have an additional link to your sign up page.
    Login or Signup to reply.
  2. 0

    The simplest solution will ba add min-height of whole screen but footer and header height to your #content wrapper.

    #content {
  min-height: calc(100vh - 131px - 58px); // screen size minus header minus footer
}

    Also need to check every media queries since footer/header height may be changed. If you have no worries about extra empty space after content just use

    #content {
  min-height: 100vh;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search