このカスタムHTMLとCSSを使用して、デスクトップブラウザで固定高さのフッタをビューポートの下部に固定。
必要に応じて、固定ナビゲーションバーでフッタを画面下部に固定も使用可能。
/* 固定フッタスタイル -------------------------------------------------- */ html { position: relative; min-height: 100%; } body { /* フッタの下側マージンの高さ */ margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; /* ここでフッタの固定高さを設定 */ height: 60px; background-color: #f5f5f5; } /* ページのカスタムCSS -------------------------------------------------- */ /* フッタを画面下部に固定の設定とは無関係 */ .container { width: auto; max-width: 680px; padding: 0 15px; } .container .text-muted { margin: 20px 0; }
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>フッタを画面下部に固定</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- このテンプレートのカスタムスタイル--> <link href="css/sticky-footer.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- ページコンテンツ --> <div class="container"> <div class="page-header"> <h1>フッタを画面下部に固定</h1> </div> <p class="lead">このカスタムHTMLとCSSを使用して、デスクトップブラウザで固定高さのフッタをビューポートの下部に固定。</p> <p>...</p> </div><!-- /.container --> <!-- フッタ --> <footer class="footer"> <div class="container"> <p class="text-muted">ここには固定フッタのコンテンツを配置。</p> </div> </footer> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="js/bootstrap.min.js"></script> </body> </html>