Pied de page collant et le contenu avec 100% de hauteur

Question

Je veux une page avec pied collant dont la barre de défilement ne chevauche pas l'en-tête, seul corps. Comme je le fais en this fiddle. Mais maintenant je veux que ce contenu (boîte en pointillés) a 100% de hauteur de corps.

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

Vous pouvez proposer tout autre modèle pour l'utilisation de bas de page collante.

Answer 1

Vous pouvez définir .my_content-100% de la hauteur viewport moins la hauteur et le rembourrage (vertical) des autres éléments (c.-à-d. hauteur de l'en-tête, hauteur du bas de page, rembourrage haut et bas sur .content-container) sur votre page comme suit:

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

DEMO

Si votre en-tête et pied de page ont des hauteurs variables, cela ne fonctionnera pas bien.

Answer 2

utiliser cet exemple pour le pied collant, il ne se chevauchent pas en-tête

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

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

et je peux quelques changements dans html