브라우저 화면 비율 조절해도 footer 하단에 고정하기

<div class="wrapper">
	<div id="header">header</div>
	<hr>
	<div id="container">
		<h2>main content</h2>
		<p>
        	Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
            Temporibus asperiores aliquid consequatur eum illo ut excepturi ullam! 
            Quibusdam distinctio magni hic veritatis, 
            eaque placeat numquam et velit similique aut omnis!
		</p>
		<p>
        	Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
            Temporibus asperiores aliquid consequatur eum illo ut excepturi ullam! 
            Quibusdam distinctio magni hic veritatis, 
            eaque placeat numquam et velit similique aut omnis!
		</p>
        	Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
            Temporibus asperiores aliquid consequatur eum illo ut excepturi ullam! 
            Quibusdam distinctio magni hic veritatis, 
            eaque placeat numquam et velit similique aut omnis!
		<p>
        	
		</p>	
	</div>
</div>
<footer>
	footer
</footer>

 

/***************************/
html,body{
	margin:0; padding:0;
	width:100%; height:100%;
}
.wrapper{
	min-height: 100%;
}
/***************************/
footer{
	height:60px;
	background: #333;
	color:#fff;
}

 

 

 

 

 

참고: https://www.youtube.com/watch?v=who42wBr1ns