paramonovav · August 18, 2015 20:53
diff --git a/sticky_footer.html b/sticky_footer.html
 <!DOCTYPE html>
 <html>
 <head>
 <style>
  html{
     height:100%;    
  }
  body{
    min-height:100%;
    margin:0px;
    position: relative;
    
  }
  .content{
      text-align:center;
      padding:100px 50px 100px;  
      
  }
  footer{
    position: absolute;
    bottom: 0px;
    background-color: black;
    width:100%;
    color:white;
    text-align:center;
    line-height:50px;
  }
 </style>
 </head>
 <body>
  <div class="content">
    Here content area height only 218px and compiler window height 400px, so after that footer is fixed at bottom if now increasing content size to 500px for that, set<strong> .content class css height:500px;</strong> so content height become more than window height, that for also footer work properly.
  </div>
  <footer>Footer</footer>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	html{
	height:100%;
	}
	body{
	min-height:100%;
	margin:0px;
	position: relative;

	}
	.content{
	text-align:center;
	padding:100px 50px 100px;

	}
	footer{
	position: absolute;
	bottom: 0px;
	background-color: black;
	width:100%;
	color:white;
	text-align:center;
	line-height:50px;
	}
	</style>
	</head>
	<body>
	<div class="content">
	Here content area height only 218px and compiler window height 400px, so after that footer is fixed at bottom if now increasing content size to 500px for that, set<strong> .content class css height:500px;</strong> so content height become more than window height, that for also footer work properly.
	</div>
	<footer>Footer</footer>
	</body>
	</html>