[CSS]ヘッダは上部固定で、フッタはコンテンツが少なくても最下部にするスタイルシート、レスポンシブにも対応！

サイト構築 -CSS

Post on:2013年2月26日

sponsorsr

ナビゲーションを配置したヘッダはスクロールしても常に上部に固定されており、フッタはコンテンツの量が少なくても最下部に配置されるページを実装するスタイルシートを紹介します。

Sticky footer with fixed navbar

コンテンツが少なくてもフッタは最下部に、レスポンシブ対応で！

デモ

Bootstrapに素晴らしいデモがあったので、そこからデモを紹介します。

デモでは、ナビゲーションがあるヘッダはスクロールしても常に上部に固定されています。
デモのコンテンツ量が少ないため、狭い表示エリアで。

デモページ：ヘッダはスクロールしても上部固定

フッタは一番最初のキャプチャのようにコンテンツが少なくても下部に固定配置されており、いっぱいの時は成り行きで配置されます。

デモページ：フッタは最下部

レスポンシブにも対応しており、ヘッダ・フッタの挙動はもちろんそのままで、デモではナビゲーションも最適化されます。

デモページ：幅780pxで表示

実装

実装はデモを必要最小限にしたもので、紹介します。

HTML

上からナビゲーションのあるヘッダ、コンテンツ、フッタの順で、ヘッダとコンテンツはdivで内包し、終わりにコンテンツ量が少ない時用にpushのdivを配置します。

<body>
<div id="wrap">

<!-- Fixed navbar -->
  <div class="navbar-fixed-top">
    <nav>Fixed Navbar</nav>
  </div>

<!-- Begin page content -->
  <div class="container">
    <div class="page-header">
      <h1>Sticky footer with fixed navbar</h1>
    </div>
    <p class="lead">コンテンツ</p>
  </div>

  <div id="push"></div>
</div>

<div id="footer">
  <p>Sticky Footer</p>
</div>

</body>

CSS

ベースとなるCSSから。
とりあえず、全称セレクタでリセットしておきます。
※利用環境に合わせて、適宜変更してください。

*{
  margin:0;
  padding:0;
}

まずは、ナビゲーションのあるヘッダを固定します。

/* Fixed Navbar styles
-------------------------------------------------- */
.navbar-fixed-top {
  position: fixed;
  top: 0;
  right:0;
  left: 0;
  z-index: 1030;
  margin-bottom: 0;
}

続いて、フッタの固定配置です。
#pushと#footerは同じ高さにし、#wrapのネガティブマージンも同じ値にします。

/* Sticky footer styles
-------------------------------------------------- */
html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

シンプルなデモ

必要最小限にしたデモをアップしておきました。
コンテンツの高さは、height:500px; です。

シンプルなデモ

IE6-8に対応させたい時は「html5shiv.js」を外部ファイルとして記述してください。

上記スタイルシートにはない飾りは、下記の通りです。
「#wrap > .container」のheightを変えて、コンテンツの高さを調整してください。

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
nav {
  height:50px;
  background-color:#a5a5a5;
}
.navbar-fixed-top {
  -webkit-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
          box-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
}
#wrap > .container {
  padding-top: 60px;
  height:500px;
  background-color:#f5f5f5;
}
#footer {
  background-color: #d5d5d5;
}