【 HTML, CSS 】ヘッターとフッターを固定するレイアウト - HTML5, jQuery役立つ情報ブログ

HTMLとCSSでヘッダーとフッターを固定するレイアウトサンプルです。

ポイント
①ヘッダーとフッターにそれぞれ position: fixed; をつける
②固定する位置は top: 00px; 、left: 00px; 、bottom: 00px 、right: 00px; の様に指定する
③ヘッダーとフッター幅の分だけ、コンテント部分の上下に余白（padding）をとる

実際やることはこれだけで、あとはレイアウト次第になります。

以下はサンプル例です。

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Fixed header and footer</title>
<link rel="stylesheet" href="css/fixed.css">
</head>
<body>
<header>
<h1><a href="#" title="typhoon"><span class="hidden">typhoon</span></a></h1>
<ul>
<li><a href="#">about</a></li>
<li><a href="#">regist</a></li>
<li><a href="#">inquiry</a></li>
</ul>
</header><!-- /header -->
<div id="content">
<section>
<h2>Main Content 1</h2>
<p>Lorem ipsum dolor sit amet, est tation omnium ex, timeam neglegentur qui in. Sea ubique eripuit in. Eu altera aperiri mea, solet accusam periculis ne vim, ut malorum fabulas habemus mel. Vis partiendo scribentur ut. Mel consequat reprimique an, laudem quodsi eloquentiam usu et.</p>
</section>
<section>
<h2>Main Content 2</h2>
<p>Duo eu minimum accusata, dicta nominavi eu est. Ex graeci pericula constituto vis, quo inermis officiis ad, an agam graecis lobortis est. Ex quo errem alterum appareat. Suas paulo tractatos et eum. Et est accumsan repudiandae consequuntur, ne vel stet eligendi. Has ne integre molestie, illud summo forensibus ei sed, ei his vidisse aliquip. Duis apeirian persecuti ut nam.</p>
</section>
<section>
<h2>Main Content 3</h2>
<p>Detraxit mandamus maluisset at vis, eros primis usu ut. Tota solet in sea. Ex altera voluptatum eam. Pro iudico legere ea. Aeterno vidisse assueverit cu vis. Melius consequuntur ea cum, eu congue nemore eam. Blandit voluptatum referrentur ei pro, vis aperiam integre quaeque ad, eos dicunt ancillae et.</p>
</section>
<section>
<h2>Main Content 4</h2>
<p>Quo at diceret assentior. Odio appetere incorrupte eos an, eirmod praesent mediocrem nec id, eum ut quis harum possim. Sea purto eruditi adipiscing ut, eos aliquip interpretaris at. Eu vim porro evertitur suscipiantur. Ea qui augue ornatus referrentur, modo luptatum temporibus sit ei.</p>
</section>
<section>
<h2>Main Content 5</h2>
<p>Prompta patrioque deterruisset pro no, ius platonem assueverit et. Mea et suas augue dolore. Ut justo augue consequuntur ius, ea periculis laboramus liberavisse vis. Eu nec feugait percipit dissentiet. Lucilius mandamus consequuntur vix ei.</p>
</section>
</div><!-- /#content -->
<footer>
<p id="copyright"><small>&copy; Fixed header and footer sample</small></p>
</footer><!-- /footer -->
</body>
</html>

【fixed.css】

@charset "UTF-8";

body{  
  margin: 0;
  padding: 80px 0;
  line-height: 1.5;
  font-family: sans-serif;
}

h1 {
  padding: 0 20px;
  margin: 0;
}
h1 a {
  width: 212px;
  height: 92px;
  display: block;
  background: url(../img/logo.png) no-repeat;
}

h2 {
  border-left: 8px solid #E96;
  padding-left: 15px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  padding: 5px 0;
  background-color: #479137;
  color: #FFF;
  box-shadow: 0 2px 15px 5px #AAA;
}

header ul {
  list-style: none;
  margin: 0 0 0 180px;
  position: absolute;
  top: 25px;
  right: 20px;
}
header ul li {
  float: left;
  padding-left: 24px;
  margin-left: 20px;
  background: url(../img/arrow.png) no-repeat left center;
}
header ul li a {
  color:#FFF;
  font-size: 18px;
}

#content {
  height: 100%;
  padding: 20px;
}

section {
  margin: 0 0 40px 0;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  padding: 10px 0;
  background-color: #479137;
  color: #FFF;
  text-align: center;
  box-shadow: 0 2px 15px 5px #AAA;
}

/* 隠し文字 */
.hidden {
  border: none;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

素材