CSS Игнорировать родительский контейнер для Всегда в нижнем колонтитуле Шаблоне

Question

Я пытаюсь использовать всегда в нижнем колонтитуле, как в этом учебнике: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

В основном структура DIV выглядит следующим образом:

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div> 

И соответствующий CSS:

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
} 

Это прекрасно работает до тех пор, дизайн необходим родительский DIV не оборачивает всю эту структуру, как это :

<div class="RadAjaxPanel" id="ctl00_ctl00_mainContainerPanel" style="display: block;"> 
    <div id="container"> 
     <div id="header"></div> 
     <div id="body"></div> 
     <div id="footer"></div> 
    </div> 
</div> 

Я не могу найти решение, которое держит колонтитул в нижней части, когда текст не проходит мимо окна просмотра, а также появляется после DIV тела, когда текст достаточно долго, чтобы подтолкнуть колонтитул вниз мимо нижней части окна просмотра.

Заранее благодарим за понимание CSS!

Answer 1

100% высота к родительскому контейнеру будет работать.

<div class="RadAjaxPanel" id="ctl00_ctl00_mainContainerPanel" style="display: block;height:100%"> 
    <div id="container"> 
     <div id="header"></div> 
     <div id="body"></div> 
     <div id="footer"></div> 
    </div> 
</div> 

http://jsfiddle.net/3cg81u1u/

Answer 2

Удалить position: relative из #container и добавить его вместо того, чтобы .RadAjaxPanel