ブートストラップの可変高さフッターをページまたはコンテンツの最後まで強制します。

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>