Comment pousser un pied de page vers le bas de la page lorsque le contenu est court ou manquant?

Question

J’ai une page avec un div externe qui enveloppe un div d’en-tête, de contenu et de pied de page. Je veux que le pied de page div embrasse le bas du navigateur, même lorsque le div de contenu n’est pas assez grand pour remplir la zone visible (c’est-à-dire qu’il n’y a pas de défilement).

Answer 1

Ce que je voulais, c’était que le pied de page soit au bas de la vue du navigateur SEULEMENT SI le contenu n’était pas assez long pour remplir la fenêtre du navigateur (non collant).

J’ai pu réaliser en utilisant la fonction CSS calc(). Qui est pris en charge par tous les navigateurs modernes. Vous pouvez utiliser comme:

le css :

Remplacez 186 par la taille de votre pied de page.

Answer 2

Utilisez un div vide avec flex-grow:1 pour remplir les espaces inutilisés juste avant le pied de page.

Extrayez les styles en css si nécessaire. Cela fonctionne en définissant as display:flex;

Answer 3

Exemple : http://jsfiddle.net/AU6yD/

<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code">

</div></div>

Answer 4

J’ai fait ce que Jahmic up top a fait (je ne me laisserai pas encore commenter) sauf que j’ai dû utiliser VH au lieu de % car je ne pouvais pas simplement l’appliquer à une classe de conteneur.