Forcer le pied de page de hauteur variable de Bootstrap vers le bas de la page ou le contenu, selon la plus basse des valeurs

Question

Dans ma page d'amorçage, je veux forcer le <footer>...</footer> à être au bas de la page ou du contenu, le plus bas des deux.

Et il existe déjà un solution qui fonctionne très bien. Cependant, cette approche nécessite que je sache à l'avance quelle sera la hauteur du pied de page.

Comment puis-je obtenir la même chose, mais la hauteur de bas de page est déterminée par son contenu?

Answer 1

Vous pouvez utiliser flexbox pour obtenir un pied de page collant.

L'utilisation flex: 1 0 auto;-section rendra flexible, il fera l'acquisition de tout l'espace libre disponible dans flex-container.

flex: <positive-number>

fait le point de flex souple et définit la base flexible à zéro, résultant en un élément qui reçoit la proportion déterminée de l'espace libre dans le récipient flexible. Si tous les éléments dans le conteneur flex utiliser ce modèle, leur taille sera proportionnelle à la spécifiée factor.Equivalent flex de fléchir: 1 0.

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 1px; /* Height hack for IE */ 
 
} 
 

 
header, 
 
footer { 
 
    padding: 10px; 
 
    color: white; 
 
    background-color: #000; 
 
} 
 

 
section { 
 
    flex: 1 0 auto; /* This will make section flexible */ 
 
}

<header>Header</header> 
 
<section></section> 
 
<footer>Footer</footer>