自定义wordpress主题以创建粘性页脚

Question

I want to customize a Wordpress theme (Attitude) in order to add a sticky footer. Unfortunately I am faced by two problems:

1. If there is not enough content to fill the complete page, a grey gap between the content and the footer appears: Demo

2. If there is enough content to fill the page, the footer is overlaying the content but I wont the footer to be placed at the end of the page, after the content (if there is enough content to fill the page): Demo

This is my current CSS customizing:

body {
   height:100%;
}
.wrapper {
   min-height:100%;
   position: relative;
}
#site-generator {
   position:fixed;
   bottom:0;
   width:100%;
   background-color: #fff;
   max-width: 1038px;
}

Could you please help me by explaining what I can do to solve my problems mentioned above? Thank you very much.

Answer 1

For your Demo 1 example above please add this to your CSS style-sheet:

html {
    height: 100%;
}

This will allow your body tag and it's other children to inherit the height of its main ancestor, the html tag. Extending the content to the bottom of the page. Make sure to always have height:100%for both the html and body tag, in order to have it work.

For your Demo 2 example above add this:

html {
    height: 100%;
}

.wrapper {
    padding-bottom: 65px; /* same value as footer .site-generator height */ 
}

#site-generator {
    position: absolute; /* use absolute instead of fixed */
}

The reason I use position:absolute instead of position:fixed, is because fixed will always be on top in the same position in the browser viewport.