HTML４をでページを作ることが減少して、ＨＴＭＬ５で書くことが多くなった。
自分で書いていた使い回しのメモも、いいかげん更新しないと無駄な作業が多い。
これから書いていくメモに、Fragment （断片）、Android にも、Ｗｅｂフレームワークの Wicket でも
登場する Fragment を意識する。
Ｗｅｂページのフッタの下が隙間が空かないようにしたＨＴＭＬのっメモ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample</title>
<link rel="stylesheet" type="text/css" href="basic.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#content').load("content.html");
});
</script>
</head>
<body>
<header id="header"><h2>ヘッダ</h2></header>
<div id="content">コンテンツ置換部分</div>
<footer id="footer"><h4>フッタ</h4></footer>
</body>
</html>
フッタの配置の指定を”絶対位置”に指定、 → position: absolute;
した上で、下端を 0 にする。 → bottom: 0;
コンテンツの padding-bottom をフッタの高さ以下にする。
上のＨＴＭＬでは、さらにフッタの中で h4 で書いているので
この h4 に対して、margin-bottom: 0px; が必要
上記の basic.css は、以下のように。。。
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #000090;
color: #ffffff;
text-align: center;
}
header > h2{
margin-top: 0px;
}
#content{
margin: 8px;
padding-bottom: 40px; /*フッターの高さ以下にする*/
}
footer{
height: 40px;
position: absolute;
bottom: 0;
width: 100%;
background-color: #000090;
color: #ffffff;
text-align: center;
}
footer > h4{ margin-top: 10px; margin-bottom: 0px; }
テストで、いきなりローカルのＨＴＭＬを chromeで、読むと
XMLHttpRequest cannot load になってしまうので、、、
--allow-file-access-from-files を指定で起動するようにしないといけない。
