フッタがフレックスボックスのメインコンテンツの下に配置されていません

Question

フレックスボックスを使用して、画像の束をレイアウトします。

.cards 
    .card.card1 
    .card.card2 
    .card.card3 
    .card.card4 
    etc.... 
footer 

CSS：

私がいる問題がある

.cards{ 
    display: flex; 
    width: 100%; 
    flex-wrap: wrap; 
    height: 81.2rem; 
} 

.card{ 
    display: flex; 
    flex-wrap: wrap; 
    height: 100%; 
    max-height: 28rem; 
    position: relative; 
} 

...

私は.cardsのdivの下にする必要がありフッターを持っていますが、.cardsは、高さを有しているので、私は高さを教えているdivの上にフッタが置かれています。 （カード自体は高さを超えて伸びています）

しかし、私は背の高い高さに設定しようとしましたが、カードの行間のスペースが広がります（私は望みません）。私も高さを設定しようとしなかったが、カードはまったくレイアウトされていない、彼らはちょうど消えたり、ページの下に浮いている。

.cards divをクリアする方法はありますか？

一般的には、フッターがカードの下に表示されますか？

これは現在のフッターを示していますが、これは間違っています。

これは、私はそれがために必要フッタを示し：min-height: 100%を使用するか、または完全に高さを除去する、固定された高さまで容器を制限

Answer 1

代わりのheight: 100%を、。

heightプロパティがinstalled properlyの場合、親要素または祖先要素にmin-heightを適用する必要があります。

詳細：OPからWorking with the CSS height property and percentage values

---

その他の注意事項：

は、フレックスボックスの直接の子に高さを追加し、これは、コンテナがそのを決定することができます高さ。

別の注意点として、子孫（直系の子孫ではない）に高さを設定すると、コンテナフレックスボックスは独自のサイズを設定する方法を知らず、高さも持ちません。