📌
【CSS】フッターを固定したい
フッターを作成した際にページの内容によってはフッターの位置がバラバラになることがあるので下に固定するためのやり方をメモ程度に残します。
フッターをページ下に固定
CSSを使用したやり方
application.css
html {
height: 100%;
}
body {
height: 100%;
}
footer {
position: sticky;
top: 100vh;
}
html、body、footerそれぞれに高さを100％に設定。
footerにはposition: sticky;を使用。
top: 100vh;で画面の高さに対して100％の位置に表示されます。
position: fixed;とposition: sticky;の違い
position: fixed;とposition: sticky;は、要素をスクロールした際に指定した位置に固定するものになります。
違いとしては、position: fixed;は、要素を画面上の特定の位置に固定させることができます。スクロールしても画面上の指定された位置に固定されます。
position: sticky;は、要素が親要素の範囲内で追従することができます。スクロールしたときに要素を画面上の特定の位置に固定させることができますが、親要素の範囲内でのみ追従するため、親要素の範囲外には出ないように設定することができます。
また、position: sticky;は、要素の高さを維持することができるのに対して、position: fixed;は、要素が画面上の特定の位置に固定されるため、要素の高さがなくなってしまうことがあります。
上記2つの使い分けとしては、要素が画面上の特定の位置で固定する場合はposition: fixed;
要素が親要素の範囲内で追従する必要がある場合はposition: sticky;を使用します。
感想
CSS初学者の自分からするといろいろなプロパティが存在するため、将来的にbootstrapを使用しないでオールCSSで作成できるようにするためにも少しづつプロパティをここにメモとして残していければと思います。
参考
Discussion