<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
$("article").click(function(){
$("header").addClass("header");
$("footer").addClass("footer");
$("article").addClass("article");
});
});
</script>
<style>
body{
margin:0;
padding:0;
}
article{
cursor:pointer;
}
.header{
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
line-height:50px;
text-align:center;
color:#FFFFFF;
background-color:#000000;
z-index:4;
}
.article{
position:absolute;
top:50px;
width:100%;
height:100%;
color:#333333;
background-color:#CCCCCC;
z-index:2;
}
.footer{
position:fixed;
bottom:0;
left:0;
width:100%;
height:50px;
line-height:50px;
text-align:center;
color:#FFFFFF;
background-color:#000000;
z-index:3;
}
</style>
</head>
<body>
<section>
<header>
header要素
</header>
<article>
<h2>h2要素</h2>
<p>
p要素 p要素 p要素 p要素 p要素 <br>
p要素 p要素 p要素 p要素 p要素 <br>
p要素 p要素 p要素 p要素 p要素 <br>
p要素 p要素 p要素 p要素 p要素
</p>
</article>
<footer>
footer要素
</footer>
</section>
</body>
</html>