あなたのフッターをページの下部にとどまらせる方法.

2432 ワード
codenewbie css beginners テキストリンク
私は最近フッターを配置するという問題に出会った.解決策を見つけた後、私はこのポストでそれを文書化することに決めました.
私たちの目標は
  • コンテンツが画面を充填していない場合でも、フッターは下部にとどまります.
  • 画面がコンテンツでいっぱいになっている場合(下のセクションを重ねる代わりに)ドキュメントの最後にフッタを表示します

    • あなたの容器に100 VHの最小高さを与えてください
    あなたの内容を保持するボディータグは100 Vhの最小高さを与えられるべきです.これは、その内容がページを満たしていない場合でも、本体が常にページの完全な高さを取ることを保証します.最後のタグとしてフッターを持っている本体や容器にもお使いいただけます.
    body {
 min-height: 100vh;
}

    あなたの体をflexbox
    それを与えることによってあなたの体をflexboxにしてくださいdisplay プロパティflex また、使用によってその方向を変更するflex-direction 列に設定する
    body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

    3 .フッターにオートのマージントップを与える
    あなたの体がこれに類似したレイアウトを持つと仮定すること
    <body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>
    あなたのフッタータグを与えることができますmargin-top プロパティauto
    footer {
  margin-top: auto;
}
    3つの簡単な手順です.
    この記事を読んでくれてありがとう♥️. あなたが下に持っているかもしれないどんな質問でも自由にしてください、そして、私はあなたに戻ります.
    Vue解像度適応
    特定の要素を配列から削除する