Edit in JSFiddle

<div id="content">
    <h1>
        Адаптивный футер страницы приклеенный к низу
    </h1>
    <p><button id="add" style="text-align:center;">Добавить Содержание</button></p>
</div>  
  
<div id="footer">
    <p>А вот и сам футер пристроенный к нижней части страницы. Попробуйте изменять размеры окна браузера, футер будет автоматом подстраиваться под выбранный вами размер.</p>
</div> 

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=latin,cyrillic");
* {
 margin: 0;
 padding: 0;
}
html {height: 100%;}
* html body {height: 100%;}
body {
 min-height: 100%;
 position: relative;
}
body {
  background: #fafafa;
}
h1 {
  font: 24px/28px 'Open Sans', sans-serif;  
  color: #555;
  padding: 50px 0;  
  font-weight: 400;
  text-align: center;
}
p {
  padding: 20px;
}
#content {
 padding-bottom: 100px;
}
#footer {
 position: absolute;
 bottom: 0;
 background-color:slategrey; 
 width:100%;   
 height: 80px;
 color: #ccc;
 text-align: center; 
}