将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>