Sticky Footer (Less)

Example html

<div class="wrapper">
	<div class="container">
		<header>
		
		</header>
		<div id="content">
		
		</div>
	</div>
	<div class="footer-push"></div>
</div>
<footer>
	<div class="container">
	   
	</div>	
</footer>

gistfile1.css

//  Sticky Footer + Responsive
// ---------------------------

@footer-height: 300px;  
@footer-height-large: 250px;        //Larger width -> less height
@footer-height-tablet: 350px;       //Smaller -> more height needed


//Sticky Footer (http://ryanfait.com/sticky-footer/)
//--------------------------------------------------
html, body {
    height: 100%;   
} 
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -@footer-height;
} 
footer, .footer-push { 
    height: @footer-height;
}  

// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
// --------------------------------------------------

@media (max-width: 767px) {
    .wrapper {
        min-height: 0;
        height: auto;
        margin: 0 auto;
    } 

    footer, .footer-push { 
        height: auto; 
        margin: 0 -20px; 
        .container{
            padding: 0 20px;
         }
    }

}


// PORTRAIT TABLET TO DEFAULT DESKTOP
// ----------------------------------

@media (min-width: 768px) and (max-width: 979px) {
    .wrapper {
        margin: 0 auto -@footer-height-tablet;
    } 
    footer, .footer-push { 
        height: @footer-height-tablet;
    }  
}


// LARGE DESKTOP & UP
// ------------------

@media (min-width: 1200px) {
    .wrapper {
        margin: 0 auto -@footer-height-large;
    } 
    footer, .footer-push { 
        height: @footer-height-large;
    }
}