読者です 読者をやめる 読者になる 読者になる

Fragment を意識してメモ

HTML4をでページを作ることが減少して、HTML5で書くことが多くなった。
自分で書いていた使い回しのメモも、いいかげん更新しないと無駄な作業が多い。
これから書いていくメモに、Fragment (断片)Android にも、WebフレームワークWicket でも
登場する Fragment を意識する。

Webページのフッタの下が隙間が空かないようにしたHTMLのっメモ

<!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 をフッタの高さ以下にする。

上のHTMLでは、さらにフッタの中で 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; }


テストで、いきなりローカルのHTMLを chromeで、読むと
XMLHttpRequest cannot load になってしまうので、、、

--allow-file-access-from-files を指定で起動するようにしないといけない。