cssのみで、header footer の固定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML5 TEMPLATE</title>
<style>
html, body{
margin: 0; /* 余白の削除 */
padding: 0; /* 余白の削除 */
width:100%;
height:100%; }
</style>
</head>
<body>
<div style="
background-color:#CCCCCC;
Height:100%;
width:90%;
min-Height:300px;
position:relative
">
<div style="
background-color:#FFFF99;
width:200px;
Height:150px;
" >ヘッド</div>
<div id="contents" style="
background-color:#FFCC99;
position:absolute;
left:50px;
top:150px;
bottom:100px;
width:200px;
" >コンテンツ。ブラウザの高さが変わった分、コンテンツのエリアが伸び縮みする
</div>
<div style="
background-color:#CCFF99;
position:absolute;
bottom:0px;
width:200px;
Height:100px;
" >フッダ</div>
</div>
</body>
</html>
ポイントは、Bodyを100％にして その中に、固定エリア用の、ヘッダとフッタを宣言。フッタは、bottom=0として下側固定。
contentsエリアもtop にヘッダのサイズ、bottomにフッタのサイズを設定している。
サンプル１
http://shodai2006.mydns.jp/html/20170520_fix_headerfooter/html5_1.html
サンプル２
<meta name="apple-mobile-web-app-capable" content="yes" />を入れ込んだもの
http://shodai2006.mydns.jp/html/20170520_fix_headerfooter/html5_2.html
サンプル１の画像
URLバーが出たりすると高さが一定とならない
サンプル２の画像
<meta name="apple-mobile-web-app-capable" content="yes" />をいれて、フォームにアイコンを作成し、アイコンから起動した場合は
横向きの場合urlバーが出ず、高さが安定する
メニューが、apple-mobile-web-app-capable～対応のフォームアイコン起動した場合でも、同一サイトの別urlを読み込んだ場合は、apple-mobile-web-app-capable～対応の効果は外れてしまう。
http://shodai2006.mydns.jp/html/20170520_fix_headerfooter/html5_2menu.html
ajax遷移をすればいいのかなぁぁ？
jQuerymobile 1.4.5 で ヘッダ、フッダを data-position="fixed" にて固定してみたときのふるまい
http://shodai2006.mydns.jp/html/20170520_fix_headerfooter/jqt2.html
ios safariでは横向きにしたとき、urlバーがでると、フッダが隠れてしまうなぁ
jQuerymobile の <div role="main" class="ui-content">内で、固定ヘッダエリア、可変エリア、固定フッタエリアを設けてみた場合
http://shodai2006.mydns.jp/html/20170520_fix_headerfooter/jqt3.html
http://shodai2006.mydns.jp/html/20170520_fix_headerfooter/jqt4.html
http://shodai2006.mydns.jp/html/20170520_fix_headerfooter/jqt5.html
いくつか、実装パターンを変えてみたけど、URLバーが表示されると可変領域の高さが減る。resizeイベントのようなもので、再調整する必要があるのかも。。。
