html - Sticky footer with a variable height -

i know there lot of same topics, there css way stick bottom footer height in % without overflowing body , header because of absolute position ?

i'm trying stick 1 :

html,body{     height: 100%; }  #header{     background-color: yellow;     height: 100px;     width: 100%; }  #holder {     min-height: 100%;     position:relative; }  #body {     padding-bottom: 100px; }  #footer{     background-color: lime;     bottom: 0;     height: 100%;     left: 0;     position: relative;     right: 0; } 

with html :

<div id="holder">     <div id="header">title</div>     <div id="body">body</div>     <div id="footer">footer</div> </div> 

code here : http://jsfiddle.net/tsrkb/

thanks !

if use display:table base , sticky footer can size , pushed down if content grows.

http://dabblet.com/gist/5971212

html {     height:100%;     width:100%;     } body {     height:100%;     width:100%;     display:table;     table-layout:fixed;     margin:0 auto;     width:80%;     } .tr {     display:table-row;     background:turquoise     } section.tr {     height:100%;     background:yellow     } 

for

<header class="tr"> <h1>title</h1><p>make me grow</p></header> <section class="tr"><article>article</article></section> <footer class="tr"> <p>footer</p><p>make me grow</p></footer>