CSS粘贴页脚麻烦

I have a little problem with my footer on a new website I am building. I tried the technique from Ryan Fait (http://ryanfait.com/sticky-footer/), but somehow it just won't work out. maybe you can help me and tell me why?

The link to my page is aev.martenzander.com

I only tried it on the index.php, so dont get confused when visiting subpages.

CODE:

HTML

<!-- FOOTER -->
<div class="stickyfooter"></div>
<div class="footer">
    <footer>
        <?php
        include("includes/footer.php"); ?>
    </footer>
</div>

CSS

.footer{
        height: 111px;
        margin: 0 auto;
        position: relative;
    }

.stickyfooter{
        min-height: 100%;
        height: auto !important;
        margin: 0 auto -111px;
    }

So the way it works is you have a mainWrapper class with a set negative margin, then you have a push class which forces that margin to stay clear always, then you have a footer class that occupies that margin.

Right now you have no push class, and your footer class is defined within the wrapper. It needs to be outside the wrapper.

Here's a link with an easy solution:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

The HTML:

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

The CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}