Fixed Div on bottom

HTML

<div class="wrapper">
    <div id="header">
        <ul id="menu">
            <li><a href="http://amsdarquitetura.com.br/" target="_blank">AMSD Arquitetura</a></li>
            <li><a href="http://tavaresdemelo.adv.br/" target="_blank">Tavares de Melo</a></li>
            <li><a href="http://letsgofestas.com.br/" target="_blank">Let's Go Festas</a></li>
            <li><a href="http://datafilme.com.br/" target="_blank">Datafilme</a></li>
            <li><a href="http://graficaromana.com.br/" target="_blank">Grafica Romana</a></li>
        </ul>
    </div>   
    
    <div id="content" class="center-page">
      
        <p>
    Tyrus pro aperuit it in.</p>
        
    
    </div>
    <div class="push"></div>
</div>

<div id="footer" class="center-page footer">
    <div>
        <h2>Footer sample</h2>
        
        <ul>
            <li>Quem est se ad te finis puellam<li>
            <li>Quem est se ad te finis puellam<li>
            <li>Quem est se ad te finis puellam<li>
            <li>Quem est se ad te finis puellam<li>
            <li>Quem est se ad te finis puellam<li>
        </ul>
                
        <ul>
            <li>Quem est se ad te finis puellam<li>
            <li>Quem est se ad te finis puellam<li>
            <li>Quem est se ad te finis puellam<li>
            <li>Quem est se ad te finis puellam<li>
            <li>Quem est se ad te finis puellam<li>
        </ul>
    
        <ul>
            <li>Quem est se ad te finis puellam<li>
            <li>Quem est se ad te finis puellam<li>
            <li>Quem est se ad te finis puellam<li>
            <li>Quem est se ad te finis puellam<li>
            <li>Quem est se ad te finis puellam<li>
        </ul>    
    </div>            
</div>

SCSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-width:960px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
    background-color: #E9E9E9;
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

#menu {
    width:100%;
    background-color: #38761D; 
    overflow: hidden;    
    border-bottom: 1px solid #1C450A;
    
    > li {
        display: block;
        float: left;
        > a {
            display: block;
            padding: 5px 10px;
            color: #B9D1AF;
            text-decoration: none;
            &:hover {
                color: #fff;    
                background-color: #63994B;
            }
        }
    }
}

#content {
    width:100%;
    padding: 5px 10px 5px 5px;
        
    p {
        color: #333333;    
    }
}

.center-page {
    width: 960px;
    margin: 0 auto;
}

#footer {
    width: 960px;
    background: #438D23;
    
    > div {        
        width: 960px;
        overflow: hidden;
        background: #438D23;
        > ul {
            float: left;
            margin-right: 15px;
            color: #e9e9e9;    
        }
    }
}

h2 {
    font-size: 22px;
    color: #f9f9f9;
}

p {
    margin-bottom: 10px;        
}