Почему высота 100% не работает для контента?

Question

В этом коде у меня есть липкий нижний колонтитул и раздел содержания выше, но почему height:100% не работает для раздела контента?

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    margin-bottom: 60px; 
 
    height: 100%; 
 
} 
 
.content { 
 
    background-color: #116655; 
 
    height: 100%; 
 
} 
 
.footer { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #ffcc44; 
 
}

<div class="content"> 
 
    <div>content</div> 
 
</div> 
 

 
<footer class="footer"> 
 
    My footer 
 
</footer>

Answer 1

Вы должны установить фактическую высоту на html

html { 
position: relative; 
    height: 100%; /* not min-height */ 
} 

JsFiddle Demo

Answer 2

Использование position: absolute в на содержание, а также, а затем использовать top: 0 и bottom: 60px это будет сделать контент занятым rema в пространстве. затем используйте overflow: auto;, чтобы разрешить прокрутку содержимого;

(Demo)

.content { 
    position: absolute; 
    top: 0; 
    bottom: 60px; 
    background-color: red; 
    overflow: auto; 
}