footerを最下部に固定する

CSS,技術備忘録

 

仕事でfooterタグがなぜか最下部に表示されず最上部に表示されてしまっていたので、備忘録として記録。

 

 

修正前

このコードだと出力画面ではなぜかfooterが画面の最上部に表示されていた。

<html>
<head>
～
<head>
<body>
    <header>
    </header>

    <div id="main">
    </div>

    <footer>
    </footer>
</body>
</html>

 

position:absolute、bottom:0を設定してもダメだった

footerにposition:absolute、bottom:0を設定しても意味なし。

<footer style="position:absolute;bottom:0">
    最下部に表示されませぬ
</footer>

 

position:fixedも求めていたものとは違う

position:fixedを設定すると表示はされるけどスクロールしても画面下部固定になっちゃうし。

<footer style="position:fixed;bottom:0">
    これも求めていたものとは異なる
</footer>

 

修正後

footerに親要素を追加

まずはfooterに親要素を追加します。

<html>
<head>
～
<head>
<body>
    <div id="wrapper">
        <header>
        </header>

        <div id="main">
        </div>

        <footer>
        </footer>
    </div>
</body>
</html>

 

CSSも追加

CSSに下記を追加。

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    margin-top: auto;
}

これでOK。

CSSムズ過ぎです。

 

参照：https://www.tipdip.jp/tips_posts/production/2213/

CSS,技術備忘録