Sticky Footer - Dissplay Table

HTML

<button id="add">اضافه كردن محتوا</button>
<div class="main">
    <p>
لورم ایپسوم متنی است که ساختگی برای طراحی و چاپ آن مـورد است.صنعت چاپ زمانی لازم بـود شرایطی شـمـا بـایـد فکر ثبت نـام و طـراحـی، ازمه خروج می باشد لورم ایپسوم متنی است که ساختگی برای طراحی و چاپ آن مـورد است.صنعت چاپ زمانی لازم بـود شرایطی شـمـا بـایـد فکر ثبت نـام و طـراحـی، ازمه خروج می باشد
    </p>
</div>
<div class="footer">
    <p>فوتر چسبان</p>
</div>

CSS

/* Mohammad Reza Mahmoudi (rezamahmoudi.ir) */
*{margin:0;padding:0;}

body{display:table;}
html, body{height:100%;}
.main{height:100%;width:100%;padding-bottom:20px;background:#eee;display:table-row}
.footer{/*height:50px;*/line-height:30px;width:100%;background:#00f0ad;display:table-row;}

/* Ignore section below */

body{direction:rtl;font-family:XYekan, BYekan, tahoma;font-size:.8em;line-height:150%;}
p{margin:10px;}
button{font-family:XYekan, BYekan, tahoma;font-size:1em;margin:10px;background:#e83b3b;color:#fff;border:none;cursor:pointer;padding:8px 15px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}

JavaScript

$("#add").on("click", function() {
  $("<p>لورم ایپسوم متنی است که ساختگی برای طراحی و چاپ آن مـورد است.صنعت چاپ زمانی لازم بـود شرایطی شـمـا بـایـد فکر ثبت نـام و طـراحـی، ازمه خروج می باشد لورم ایپسوم متنی است که ساختگی برای طراحی و چاپ آن مـورد است.صنعت چاپ زمانی لازم بـود شرایطی شـمـا بـایـد فکر ثبت نـام و طـراحـی، ازمه خروج می باشد</p>").appendTo(".main");
});