100% высота контейнера с нижним колонтитулом

Question

У меня проблема со страницей, которую я делаю.

Фрагмент кода:

<div id="header"> // header..
</div>
<div id="content">  // content where ajax is loaded (should be atleast 100% of the site height)
    <!-- ajax -->
</div>
<div id="footer"> //empty atm.

</div>

теперь для css:

#content{
    margin-left:auto;
    margin-right:auto;
    background-color:#767670;
    width:800px;
    border-left:1px solid #9F9793;
    border-right:1px solid #9F9793;
    position:relative;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */

}
#footer{
    width:100%;
    height:40px;
    border-top:1px solid #9F9793;
    border-bottom:1px solid #9F9793;
    background-color:#767670;
}

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

Answer 1

#content{
height:100%;
}

Это означает, что content div занимает 100% родительского контейнера, который в данном случае является html.

Так напишите

html{
height:100%;
}