ヘッダーとフッターを固定する

html

qiita.html

<!-- ヘッダー -->
<div class="header_area">
    <div class="header_block">
        <div class="header_box">
            <h1>
                ヘッダー
            </h1>
        </div>
    </div>
</div>
<!-- /ヘッダー -->

<!-- コンテンツ -->
<div class="contents_wrap">
    <div class="contents_area">
        <div class="content_block">
            コンテンツ
        </div>
    </div>
</div>
<!-- /コンテンツ -->

<!-- フッター -->
<div class="footer_area">
    <div class="footer_block">
        <div class="footer_box">
            <p>
                フッター
            </p>
        </div>
    </div>
</div>
<!-- /フッター -->

css

qiita.css

body {
  margin: 0;
  padding: 0;
  background: #FBF7EC;
}

.header_area {
  position: fixed;
  top: 0;
  width: 100%;
}

.header_block {
  background: #FDDC80;
}

.header_box {
  width: 700px;
  margin: 0 auto;
}

.header_box h1 {
  margin: 0;
  padding: 20px 0;
  font-size: 34px;
  text-align: center;
}

/* コンテンツ */
.contents_area {
  width: 700px;
  overflow: auto; /* スクロールする範囲を制御 */
  margin: 0 auto;
  padding: 150px 0 150px; /* コンテンツ上下にスペース */
}

.content_block {
  padding: 300px 10px;
  border: 1px solid #CCC;
}

/* フッター */
.footer_area {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.footer_block {
  background: #FDDC80;
}

.footer_box {
  width: 700px;
  margin: 0 auto;
}

.footer_box p {
  margin: 0;
  padding: 20px 0;
  font-size: 34px;
  text-align: center;
}

/* IE6 */
html,
body {
  _height: 100%;
  _overflow: hidden;
}

.header_area,
.footer_area {
  _position: absolute;
}

.header_block,
.footer_block {
  _margin-right: 17px; /* IE6スクロールバーの幅分 */
}

.contents_wrap {
  _width: 100%;
  _height: 100%;
  _overflow: auto;
}