Just try this and explore
<html>
<head>
<style media="screen" type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:30px;
background:#16a085;
}
#content{
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0px;
width:100%;
height:60px; /* Height of footer */
background:#2c3e50;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed mauris placerat risus consectetur sollicitudin at eget purus. Nulla tristique sagittis mauris, ut porttitor nibh aliquet sed. Curabitur euismod fermentum ultrices. Ut finibus, risus a tempor finibus, est quam suscipit ipsum, eu pellentesque turpis lacus nec eros. Phasellus suscipit est nec sapien venenatis pharetra. Etiam viverra eros in nunc venenatis, vel rhoncus ipsum mollis. Nunc a porta justo, lacinia aliquet sem. Nullam interdum sed est quis lacinia. Curabitur a leo velit. Phasellus eu eros urna.</p>
<p>Mauris pellentesque at nisl et interdum. Phasellus a posuere dui. Nulla molestie ligula at nulla porttitor vulputate. Praesent sagittis dapibus congue. Aliquam erat volutpat. Aliquam sit amet cursus felis. In ultricies scelerisque justo eget tincidunt. Donec cursus aliquam est, vitae accumsan turpis egestas nec. Donec tempor magna ex, sed viverra nisi tincidunt vitae. Nam vulputate est massa, nec faucibus sapien pulvinar vel. Vestibulum pellentesque mollis tellus, nec ultricies metus. Fusce quis risus eleifend magna semper semper quis eget massa. Curabitur aliquam tincidunt est et finibus. Etiam pulvinar, ligula a imperdiet maximus, ex est molestie risus, ac pulvinar lorem sapien id enim. Sed viverra ultrices molestie. Curabitur ut vulputate magna, eget malesuada felis.</p>
<p>Etiam ut fermentum erat. Vestibulum varius et dui at maximus. Fusce placerat tempor mi eu suscipit. Nam sodales sed nulla ut scelerisque. Nulla facilisi. Morbi ultricies venenatis nisi, posuere placerat diam imperdiet ut. Nam lorem diam, posuere ac dictum at, cursus ut enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce a vulputate ligula.</p>
<p>Curabitur luctus mauris enim, a commodo quam elementum quis. Aliquam sit amet vehicula nibh. Integer vel ex ultricies arcu commodo convallis. Integer venenatis eu neque eget dictum. Nunc sed massa metus. Mauris gravida luctus purus, vel scelerisque lacus maximus et. Maecenas laoreet magna a elit auctor aliquet. Phasellus ipsum mi, mollis ac sagittis et, blandit sit amet massa. Praesent finibus ipsum elit, nec posuere leo venenatis quis. Pellentesque eleifend nunc in neque dictum commodo. Nam tellus orci, ornare placerat tortor non, feugiat dignissim diam. Etiam eu mollis quam, vitae gravida nunc. Sed eu lectus vitae odio malesuada viverra a quis leo. Ut egestas rhoncus placerat. Vivamus pellentesque felis sed tellus efficitur tempor. Quisque accumsan egestas nulla a placerat.</p>
<p>Aenean fermentum sit amet nunc ac ultricies. Sed dapibus metus id odio bibendum, a tempor lorem tincidunt. Quisque eu iaculis lorem. Integer in tortor a erat fringilla eleifend. Integer venenatis nisi ut ante sagittis scelerisque. Praesent et nibh quis dui dignissim porta. Curabitur ac ipsum eleifend eros posuere posuere.</p>
</div>
<div id="footer"></div>
</div>
</body>
</html>
