Rodapé e conteúdo pegajoso com 100% de altura - html, css, html5, css3, sticky-footer

Quero uma página com rodapé fixo cuja barra de rolagem não se sobreponha ao cabeçalho, apenas ao corpo. Como faço em este violino. Mas agora eu quero que o conteúdo (caixa pontilhada) tenha 100% da altura do corpo.

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;
}

Você pode sugerir qualquer outro modelo para usar o rodapé adesivo.

Respostas:

Você pode definir .my_content a 100% da altura da janela de visualização menos a altura e o preenchimento (vertical) dos outros elementos (ou seja, altura do cabeçalho, altura do rodapé, preenchimento superior e inferior em .content-container) em sua página assim:

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

DEMO

Se o seu cabeçalho e rodapé tiverem alturas variáveis, isso não funcionará.

use este exemplo para o rodapé fixo, ele não se sobrepõe ao cabeçalho

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

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

e eu posso algumas mudanças em html