Липкий нижний колонтитул с переменной высотой

Question

Я знаю, что существует много тем, но есть ли какой-либо способ CSS придерживаться нижнего колонтитула с высотой в% без переполнения тела и заголовка из-за абсолютной позиции?

Я пытаюсь придерживаться этого один:

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; 
} 

с HTML:

<div id="holder"> 
    <div id="header">Title</div> 
    <div id="body">Body</div> 
    <div id="footer">Footer</div> 
</div> 

код здесь: http://jsfiddle.net/TsRkB/

Спасибо!

Answer 1

при использовании дисплея: таблиц в качестве базы, то ваша липкая сноска может быть любого размера, и будет уменьшаться, если контент будет расти.

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 
    } 

для

<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>