CSSでヘッダーとフッターを常に固定する

Milano design week 2010 :: Zona Tortona By: Bruno Cordioli

ヘッダーとフッターを常に固定の位置に配置する方法。

前にCSSでフッターを画面下部に固定する方法をUpしたので、今回は常に固定する方法をステップ バイ ステップでご紹介します。

※CSSでフッターを画面下部に固定する方法はこちら

ヘッダーとフッターの固定方法
  1. HTMLファイルの準備
  2. 全体のレイアウトの設定をする
  3. ヘッダーを固定する
  4. フッターを固定する
  5. ボディを定義する
このように「ヘッダー」「ボディ」「フッター」を順に作成して行きます。
hf1
hf2

DEMO

1.HTMLファイルの準備

まずは、今回使用するHTMLファイルを準備します

HTML
<html>
       <head>・・・</head>
              <body>
              <div id="header-fixed">
                     <div id="header-bk">
                            <div id="header">・・・</div>
                     </div>
              </div>
              <div id="body-bk">
                     <div id="body">・・・</div>
              </div>
              <div id="footer-fixed">
                     <div id="footer-bk">
                            <div id="footer">・・・</div>
                     </div>
              </div>
       </body>
</html>

2.全体のレイアウトの設定をする

CSS
/* html,bodyタグの設定 */
html, body{
    margin: 0;         /* 余白の削除 */
    padding: 0;        /* 余白の削除 */
    width:100%;
    height:100%;
}

html,bodyタグに対して100%の指定して表示領域を確保します。これでhtml,bodyタグの子要素は画面の表示領域を全て使用できます。

3.ヘッダーを固定する

hf3
CSS
/* ヘッダーの固定 */
div#header-fixed
{
    position: fixed;            /* ヘッダーの固定 */
    top: 0px;                   /* 位置(上0px) */
    left: 0px;                  /* 位置(右0px) */
    width: 100%;                /* 横幅100% */
    height: 140px;              /* 縦幅140px */
}


div#header-bk { 
	background-color:#444;     /* 背景色(黒) */
	padding:10px 0 20px;       /* 上10px、下20pxをあける */
	height:110px;              /* 縦の高さ110px */
	width:100%;                /* 横の幅を100% */
}


div#header { 
	border: 5px solid #fff;    /* 表示領域を白枠で囲う */
	height: 100%;              /* 縦の表示領域はheader-bkと同じ */
	width: 960px;              /* 横の幅970px */
	margin: auto;              /* 中央揃え */
}

「header-fixed」のposition:fixedで位置をウィンドウに対して固定します。

「position:fixed」を指定すると、通常のHTMLの定義から外れるため、その上に同じ幅と高さの「header-bk」を定義します。

「header-bk」はheightが110pxでpaddingが上10px、下20px取っているため、110+10+20で140pxとなります。

そして、最後に表示領域用の「header」を定義します。

4.フッターを固定する

hf4
CSS
/* フッターの固定 */
div#footer-fixed
{
    position: fixed;            /* フッターの固定 */
    bottom: 0px;                /* 位置(下0px) */
    left: 0px;                  /* 位置(左0px) */
    width: 100%;                /* 横幅100% */
    height: 140px;              /* 縦幅140px */
}

div#footer-bk
{
	background-color:#444;     /* 背景色(黒) */
	padding:10px 0 20px;       /* 上10px、下20pxをあける */
	height:110px;              /* 縦の高さ140px */
	width:100%;                /* 横の幅を100% */
}

div#footer { 
	border: 5px solid #fff;    /* 表示領域を白枠で囲う */
	height: 100%;              /* 縦の表示領域はheader-bkと同じ */
	width: 960px;              /* 横の幅970px */
	margin: auto;              /* 中央揃え */
}

フッターの定義はヘッダーとほぼ同じで、「footer-fixed」の位置がbootom:0pxとなるところのみ変わります。

5.ボディを定義する

hf5
CSS
/* ボディの定義 */
div#body-bk{
    padding:160px 0 160px 0;    /* 上下に160pxを余白を取る */
}

div#body{
    width:960px;
    margin:auto;
}

最後にボディ部を作成します。

ボディ部では、ヘッダーとフッターに重ならないようにpaddingで上下160pxの余白をあけます。

これで、ヘッダーとフッターの固定は完了です。

divider

Trackback URL

http://webnonotes.com/css/header_footer/trackback/

Comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>