Нормальный «нижний колонтитул не прилипает к дну» не работает

Question

Мне нужен нижний колонтитул веб-страницы, расположенный в нижней части окна браузера, а не только position: fixed, поэтому, если размер окна меньше, нижний колонтитул не должен подниматься вверх любой, кроме нижней части содержимого родительского контейнера (вам придется прокручивать вниз окно, чтобы увидеть нижний колонтитул там).

Решение, с которым я больше всего знаком (ниже), не работает для меня. Предложения?

HTML:

<div class="container"> 
    <div class="content"> 
     top content 
    </div> 
    <footer> 
     footer content 
    </footer> 
</div> 

CSS:

body, html { height: 100% } 
.container { 
    margin: 0; 
    min-height: 100%; 
    position: relative; 
    width: 100%; 
} 
.content { 
    padding: 15px; 
    margin-bottom: 36px; 
    width: 1000px; 
} 
footer { 
    background: #00a7d4; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    bottom: 0; 
    color: #fff; 
    font-size: 11px; 
    height: 36px; 
    color: #fff; 
    font-size: 11px; 
    position: absolute; 
    width: 100%; 
} 

Answer 1

Попробуйте изменить краю дна для заполнения дна:

.pageContainer { 
    /* margin-bottom: 36px; */ 
    padding-bottom: 36px; 
} 

http://jsfiddle.net/6HrLu/

Работы на Chrome.