コンテンツ量が少なくて高さがない時でもブラウザの最下部にfooterを配置する方法

2021.09.24 2023.03.10css
コンテンツ量が少なくて高さがない時でもブラウザの最下部にfooterを配置する方法

コンテンツの量が少ないページでfooterが上の方にきてしまい


このようにfooterが浮いてしまいカッコ悪くなることがあるかと思います。

その場合に解決するひとつの方法として気に入ってる対処法が以下

.wrapper {
    display: flex;
      flex-direction: column;
      min-height: 100vh;
}
 .footer {
     margin-top: auto;
}

全体を囲むwrapperとfooterに上記cssを追加するだけです♪

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です