Webサイトでウィンドウの大きさや表示している本文の位置に関係なく、標題やコピーライト等をヘッダーやフッターとして、常に表示させたい場合がある。
このような場合、以下のような方法がある。
 1.HTMLのフレームタグを利用する。
 2.CSSを利用する。

1は諸般の事情(※1)により、商用サイトでは、嫌がられることが多い。
そのため、今回は、2の方法について説明する。

サンプルファイルは、こちら(FrameSample.zip)からダウンロードできます。

以下、サンプルの説明。
【サンプルファイルの構成】
 ・Sapmle.html
 ・Style.css

【コード】
《Style.css》
以下、一部抜粋

BODY {
overflow : hidden;
height : 100%;
/* フッター分の余白を確保(スクロールバーの幅を含む) */
padding-bottom : 40px;
line-height : 1;
}
/* ヘッダー部の設定 */
#header {
background : #ddd;
text-align : center;
width : 100%;
height : 20px;
position : Fixed;
}

/* 本文の設定 */
#content {
width : 100%;
height : 100%;
overflow : auto;
position : relative;
/* ヘッダー分の余白を確保 */
padding-top : 20px;
/* フッター分の余白を確保(スクロールバーの幅を含まない) */
padding-bottom : 20px;
}

/* フッター部の設定 */
#footer {
background : #ddd;
text-align : center;
width : 100%;
height : 20px;
position : Absolute;
bottom : 0px;
}


《Sample.html》
BODY要素内でDIV要素を利用している個所がある。
このDIV要素のID属性にCSSで記述した各設定(ヘッダー、本文、フッター)を指定すれば良い。
CSSで記述した#から始まる名前を指定する。

以下、抜粋。
<BODY>
  <DIV id="header">
  ここにヘッダーの内容を記述する
 </DIV>

  <DIV id="content">
  <H1>ここに本文を記述する</H1>
  <P>サンプル1</P>
 <P>サンプル2</P>
  <P>サンプル3</P>
  <P>サンプル4</P>
  <P>サンプル5</P>
  <P>サンプル6</P>
  <P>サンプル7</P>
 <P>サンプル8</P>
 <P>サンプル9</P>
  <P>サンプル10</P>
 </DIV>

  <DIV id="footer">
  ここにフッターの内容を記述する
  </DIV>
 </BODY>


【補足事項】
・IE6の場合、上記のサンプルは上手く動作しない可能性がある。

※1 理由は、以下の通り。
 1.フレーム用のHTMLに設定したMETAタグしか読み込まれない。
  →フレームに表示しているHTMLに設定した情報が検索対象外になる。
 2.ブラウザによって、フレームに対応していない。
  →Internetが、一般に普及し始めた頃の話。
   現状、このようなブラウザが残っているかは疑問に残る。
 3.通信量が増える。
  →ブロードバンド化されたが、それに伴いサイトの情報量も増加。
   あまり変わっていない。
 4.HTTPのセッション管理の都合
  →ページの要求から取得までを1セッションとする。
   そのため、商用サイトでは、セッション管理が複雑になってしまう。
   (下手な管理をするとセキュリティホールにつながる)
 5.見映えが悪い(らしい)。
  →テーブルや擬似フレームでも悪いと言う方もいるので何とも…
   これについては、個人の趣味趣向になる。

 1〜3は、商用サイトにとってみれば、致命的な問題。
 1は、検索サイトに表示されない(=販売機会の損失)につながる。
 2と3は、費用の問題もあるため、高速な通信帯域を確保できるかどうかの問題。
 4は、信用につながる(個人情報流出の可能性を低下させる)。

商用サイトならば、「いかに検索サイトに上位表示してもらうか」や「ディレクトリに登録してもらうか」に重点を置く必要があるので、注意が必要。
(個人のブログとは違う観点で構築する必要がある)