Je veux juste ajouter - la plupart des autres réponses ont bien fonctionné pour moi; cependant, il leur a fallu beaucoup de temps pour les faire fonctionner!
C'est parce que le réglage height: 100%
ne prend que la hauteur de la division parent!
Donc, si tout votre html (à l'intérieur du corps) ressemble à ceci:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
Ensuite, ce sera bien:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
... comme "support" ramassera sa hauteur directement à partir de "corps".
Félicitations à My Head Hurts, dont la réponse a été celle que j'ai fini par me mettre au travail!
Toutefois. Si votre html est plus imbriqué (parce que ce n'est qu'un élément de la page complète, ou qu'il se trouve dans une certaine colonne, etc.), vous devez vous assurer que chaque élément conteneur a également été height: 100%
défini sur le div. Sinon, les informations sur la hauteur seront perdues entre "corps" et "support".
Par exemple, ce qui suit, où j'ai ajouté la classe "pleine hauteur" à chaque div pour vous assurer que la hauteur descend jusqu'aux éléments d'en-tête / corps / pied de page:
<div class="full-height">
<div class="container full-height">
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
</div>
</div>
Et n'oubliez pas de définir la hauteur sur la classe pleine hauteur dans le CSS:
#full-height{
height: 100%;
}
Cela a résolu mes problèmes!
position:fixed
, mais ce ne sera pas exactement la meilleure façon de le faire