Липкий и нижний колонтитул со 100% высотой

Question

Я хочу страницу с липким нижним колонтитулом, которая не перекрывает заголовок, только тело. Как я делаю в this fiddle. Но теперь я хочу, чтобы этот контент (пунктирная коробка) имел 100% высоту тела.

HTML

<div class="navbar navbar-inverse navbar-fixed-top"></div> 
<div class="container"> 
    <div class="content-container"> 
     <div class="my_content">Full height ??</div> 
     <div class="push"></div> 
    </div> 
    <div class="footer"></div> 
</div> 

CSS

html, 
    body { 
     height: 100%; 
     overflow: hidden; 
    } 

    body { 
     padding-top: 50px; 
    } 

    .container { 
     overflow-y: auto; 
     overflow-x: hidden; 
     height: 100%; 
    } 

    .content-container { 
     padding-right: 15px; 
     padding-left: 15px; 
     margin-right: auto; 
     margin-left: auto; 
     position: relative; 
     padding-top: 15px; 
     padding-bottom: 15px; 
     min-height: 100%; 
     margin-bottom: -60px; 
    } 

    .footer { 
     position: relative; 
     width: 100%; 
     background-color: red; 
    } 

    .footer, 
    .push { 
     height: 60px; 
    } 

    .my_content { 
     border: 1px dotted; 
     width: 100%; 
     height: 100%; 
     min-height: 200px; 
     min-width: 300px; 
    } 

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

Answer 1

Вы можете установить .my_content до 100% от видового экрана по высоте минус высота и (вертикальное) заполнение других элементов (например, высота заголовка, высота нижнего колонтитула, верхняя и нижняя прокладка на .content-container) на вашей странице, например:

.my_content { 
    min-height: calc(100vh - 140px); 
} 

DEMO

Если верхние и нижние колонтитулы имеют переменную высоту, это не будет работать, хотя.

Answer 2

использовать этот пример для липкой сноски он не перекрывает заголовок

http://jsfiddle.net/0dbg9ko2/12/

.footer { 
position: fixed; 
bottom:0; 
left:0; 
background-color: red; 
} 

и я могу некоторые изменения в HTML