javascript - Sticky Footer with dynamically added content -

i've been searching quite while , tried several different approaches, can't figure out solution.

i footer @ bottom of page, not shown. whenever enough posts added, want page keep growing, footer on bottom. can see in example in snippet below how's works.
however, don't want posts on left side, or start top. whenever try move page-wrap div absolute positioning, gets screwed up.

originally inspired article: https://css-tricks.com/snippets/css/sticky-footer/

$(".btn").click(function() {    var post = $('.status-box').val();    $("<li>").text(post).prependto(".posts");  });

html,  body {    height: 100%;  }  .page-wrap {    min-height: 100%;    /* equal footer height */    margin-bottom: -200px;  }  .page-wrap:after {    content: "";    display: block;  }  .site-footer,  .page-wrap:after {    /* .push must same height footer */    height: 200px;  }  .site-footer {    background: orange;  }  .container {    width: 520px;    margin-top: 20px;  }  .button-group {    margin-bottom: 20px;  }  .counter {    display: inline;    margin-top: 0;    margin-bottom: 0;    margin-right: 10px;  }  .posts {    clear: both;    list-style: none;    padding-left: 0;    width: 100%;  }  .posts li {    background-color: #fff;    border: 1px solid #d8d8d8;    padding-top: 10px;    padding-left: 20px;    padding-right: 20px;    padding-bottom: 10px;    margin-bottom: 10px;    word-wrap: break-word;    min-height: 42px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="page-wrap">    <div class="container">      <form>        <div class="form-group">          <textarea class="form-control status-box" rows="2" placeholder="what's on mind?"></textarea>        </div>      </form>      <div class="button-group pull-right">        <p class="counter">140</p>        <a href="#" class="btn btn-primary">post</a>      </div>      <ul class="posts">      </ul>    </div>  </div>    <div class="site-footer">  </div>

in order center content, can give .page-wrap width , auto margin left , rigth:

.page-wrap {   ...   width: 50%;   margin: 0 auto -200px auto; } 

$(".btn").click(function() {    var post = $('.status-box').val();    $("<li>").text(post).prependto(".posts");  });

html,  body {    height: 100%;  }  .page-wrap {    min-height: 100%;    /* equal footer height */        width: 50%;    background: lightblue;    margin: 0 auto -200px auto;  }  .page-wrap:after {    content: "";    display: block;  }  .site-footer,  .page-wrap:after {    /* .push must same height footer */    height: 200px;  }  .site-footer {    background: orange;  }  .container {    width: 520px;    margin-top: 20px;  }  .button-group {    margin-bottom: 20px;  }  .counter {    display: inline;    margin-top: 0;    margin-bottom: 0;    margin-right: 10px;  }  .posts {    clear: both;    list-style: none;    padding-left: 0;    width: 100%;  }  .posts li {    background-color: #fff;    border: 1px solid #d8d8d8;    padding-top: 10px;    padding-left: 20px;    padding-right: 20px;    padding-bottom: 10px;    margin-bottom: 10px;    word-wrap: break-word;    min-height: 42px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="page-wrap">    <div class="container">      <form>        <div class="form-group">          <textarea class="form-control status-box" rows="2" placeholder="what's on mind?"></textarea>        </div>      </form>      <div class="button-group pull-right">        <p class="counter">140</p>        <a href="#" class="btn btn-primary">post</a>      </div>      <ul class="posts">      </ul>    </div>  </div>    <div class="site-footer">  </div>