將Bootstrap的可變高度頁腳設置爲頁面或內容的底部，以較低者爲準

Question

在我的引導頁面中，我想強制<footer>...</footer>位於頁面或內容的底部，以較低者爲準。

而且有一個solution已經很好的工作。但是，這種方法要求我事先知道頁腳的高度是多少。

我該如何實現相同的目標，但頁腳高度是由其內容決定的？

Answer 1

您可以使用flexbox來實現粘腳。

使用flex: 1 0 auto;到section將使其成爲flexible，它將獲得flex-container中的所有可用空閒空間。

flex: <positive-number>

使柔性物品的柔性，並將柔性基礎零， 導致接收 自由空間中的柔性容器中的指定比例的項。如果在柔性容器 使用這種模式的所有項目，它們的大小將正比於指定 柔性factor.Equivalent彎曲：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>