HTML
CSS

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

More than 3 years have passed since last update.


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;
}