Support » Themes and Templates » [Theme: Simple Catch] How to make the footer stick at the bottom of the page?

[Theme: Simple Catch] How to make the footer stick at the bottom of the page?

  • Hi,

    I’m using Simple Catch, and really liking it.

    However, I’m trying to use a few pages that are short on content, resulting on a footer that appears in the middle of the page. It’s quite an eyesore.

    Is there any way to make the footer hug the bottom of the screen, unless the page is longer than the screen?



Viewing 15 replies - 1 through 15 (of 17 total)
  • Hi! squashai

    First of all thank you for your appreciation.

    If you have some pages that are short on content and want the footer to appear at the bottom then you could write some custom css lines.

    To write custom css lines.
    Go to the Appearance menu.
    Go to the theme options sub menu under it.
    Click on the custom css styles tab.
    Then you could enter this following css code on the enter your custom css styles field.

    #main {
    min-height: 600px;

    You could adjust the 400px i.e is the height for the content according to your will. It will push the footer down.
    And save the changes.

    Hope this will work.

    Sanjiv(Catch Themes)

    Hi Sanjiv!

    Thanks for your quick and helpful reply!

    I did try that, and it does push the footer down. However, if the browser window is resized, the footer sometimes appears below the bottom of the window, while at other times it still floats in the middle leaving an unsightly white gap at the bottom.

    I have also tried various similar hacks, including these:



    Adding height:100%; to both the html and body tags, and either height:100%; or height:60%; to #main. This is much closer to the functionality I want, but I cannot seem to achieve a layout in which the bottom of the footer is flush with the bottom of the browser–there is either a scrollbar for no reason, or the unsightly white bar.

    This leads me to believe that there are other elements whose height attributes are competing with that of #main.

    I am not very proficient at CSS, however, so I cannot tell which ones I should modify.

    Again, all I want is for the bottom of the footer to stick to the bottom of the browser window, unless the content is longer than the height of the window.

    Is there a simple way to do this?

    Theme Author Catch Themes


    Hi Squashai,

    Can you send me the link. I will check it and let you know the perfect answer.


    Sure, it’s here.

    Hmmm…do you think this would work?

    Particularly the line that gives the container a negative margin?

    #wrapper {
            min-height: 100%;
            height:     auto !important;
            height:     100%;
            margin:     0 auto -44px; /* -44px being the size of the footer */

    Well, I tried it, and it creates precisely the wrong effect. Oh well.

    Theme Author Catch Themes


    I just visited your site and saw that you have add this in your inline css
    #main {
    height: auto !important;
    margin: 0 auto -500px;
    min-height: 100%;
    You should remove the margin section. That is creating the problem.

    Sorry, I was messing around with it, trying to see if I could come up with a configuration that would work.

    I’ve removed the margin section, but the page is still oversized.

    Can you look at it again?

    To reiterate, what I’m trying to achieve is having the bottom of the footer flush with the bottom of the browser window, unless there’s overflow of the content.

    Theme Author Catch Themes


    This is not particular to theme issues. As this is the design issue which our theme doesn’t support. Ihttp://wordpress.org/support/topic/theme-simple-catch-how-to-make-the-footer-stick-at-the-bottom-of-the-page?replies=8f you give them minimum height then depending on the screen resolution, in some screen it will look fine and in other it will still be in the middle.

    But looking at your design and css you have added. Just replace the inline css you have added as
    #main {
    height: auto !important;
    min-height: 100%;
    #main {
    height: auto !important;
    min-height: 43%;

    I see. Thank you for help. I appreciate you taking the time to look at this and trying to figure it out.

    One last question: is there a way I could make the footer a fixed height and position it absolutely at the bottom?

    Theme Author Catch Themes


    but again that will create problem if you keep the position fixed when there is long text. To create the position absolute we need supporting relative div.

    Actually, it seems to work just great.

    I simply fixed it at the bottom and gave it a really high z-index.

    #main {
    height: auto !important;
    min-height: 50%;
    padding-bottom: 50px; /* The Submit button was disappearing on my blog pages. */
    #footer {
    position: fixed;
    bottom: 0px;
    margin: 0px;
    padding: 10px;
    height: 20px;
    width: 100%; /* It stopped filling the page without this. */
    z-index: 9000;
    #footer .copyright img {
    	height: 20px; /* I wanted to shrink it a little--it was pretty huge. */
    	margin:0 10px 0 0; /* Also brought it a little closer to the text. */

    It works in Chrome and IE, and even on my Samsung Galaxy Nexus (with Chrome for Android).

    I think I got the details from here.

    Anyway, thanks again for the great theme and the dedicated support!

    Theme Author Catch Themes


    but don’t you think there is problem in your blog section. You can see in your blog section you footer is fixed position always at the bottom. So, it looks quite odd. But it’s your call.


    Hmm…I guess you’re right. I think it looks fine as it is, but perhaps it would look ridiculous if I put widgets it.

    Thanks again. I guess I’ll think about it.

    I am using theme Simple Catch for my website its easy to use and nicely designed but i am facing some problems.
    Like when i am installing any contact form or i change search bar to some other design it turns text areas into grey when we click to add text..i want them to be white..can anything be done?
    Thank you

    Can someone tell me how to edit the footer text?

    Thank You

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘[Theme: Simple Catch] How to make the footer stick at the bottom of the page?’ is closed to new replies.