デザイナーのオッコです。
現在改修しているサイトで、コンテンツの量が少ないときにフッタが上に詰めて表示されてしまうという問題がありました。
フッタがせり上がって、下に空間が空いてしまっていますね。
このようなときは、bodyとfooterに以下のコードを追記します。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
margin-top: auto;
}flexで縦並びにし、一番下の要素のfooterだけmargin-topをつけて一番下に持っていくということですね。
これでフッタを画面下に持っていくことができました！
また、フッタを画面下に常に固定して表示したい場合はposition:fixedを使う別の方法になります。今回は、コンテンツ量が多いときはスクロールで隠れる場合の対処法の紹介でした。
システム開発はアピステクノロジーへ
アピステクノロジーでは、システム開発をはじめ、システムパッケージの販売にも力を入れています。
「IT TOOL」をご存じですか？
既に標準の機能が実装されているシステムパッケージを、貴社用にデザインカスタマイズし提供します。
さらに、IT導入補助金の利用で価格を大きく抑えることも可能です。
実績多数、低価格で本格的なサイトができると好評いただいております。
詳しくは弊社HPをご覧ください。
アピステクノロジーの実績紹介はこちら
ITツール紹介ページはこちら
