Sticky footer with a variable height - html

Question

I know there is a lot of same topics, but is there any CSS way to stick bottom a footer with an height in % without overflowing the body and the header because of absolute position ?
I'm trying to stick this one :
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 !

Answer 1

if you use display:table as a base , then your sticky footer can be any size and will be 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>

Answer 2

All the other solutions are out of date and have a major shortcoming: they don't work if the height of the footer is variable or unknown.
With the advent of the CSS flex model, solving this problem become very, very easy: while mostly known for laying out content in the horizontal direction, Flexbox actually works just as well for vertical layout problems. All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand. They'll automatically take up all the available space in their container.
Note how simple the markup and the CSS are. No table hacks or anything.
The flex model is supported by all major browsers as well as allegedly IE11+, though my IE doesn't render this snippet correctly yet.
html, body {
height: 100%;
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#body {
flex: 1;
border: 1px solid orange;
}
#footer{
background: lime;
}
<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>

Answer 3

Fixed it for you, basically have to put the footer outside the wrapper and move it up...
http://jsfiddle.net/sMdmk/4/
#footer{
background-color: lime;
bottom: 0;
height: 10%;
left: 0;
position: relative;
right: 0;
top: -10%;
}