よくあるチャットアプリっぽい見た目のレイアウトを作ってみたいなー、と思ってやってみたら意外と簡単にできたのでメモ。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>へっだー</h1>
</header>
<div id="contents">
</div>
<footer>
<h1>ふったー</h1>
</footer>
</body>
</html>
*{
margin:0;
padding:0;
}
body{
width:100%;
}
header{
position:fixed;
top:0;
left:0;
z-index:10;
width:100%;
height:50px;
}
#contents{
padding-top:10px;
margin-top:50px;
height:auto;
padding-bottom:10px;
margin-bottom:80px;
}
footer{
position:fixed;
bottom:0;
left:0;
z-index:10;
width:100%;
height:80px;
}
ポイントは、#contents
のpadding
やmargin
を使って、header
やfooter
が乗って隠れることになる部分の「糊代」ならぬ「乗り代」を稼いでおくことです。
そのため、#contents
のmargin-top
はheader
のheight
に、margin-bottom
はfooter
のheight
に等しい値をとっています。
僕は今回marginを使って乗り代を、paddingを使って要素同士の見かけ上の間隔を取りましたが、逆でも全然OKだと思います。
複雑なページデザインの場合
さて、上記の例は、ページが静的なデザインであり、余計なpadding
やmargin
も存在しないような場合にはそのまま適用可能ですが、そうでない複雑なページデザインの場合は上手くいかない可能性があります。(実際はこういう場面の方が多いかもしれません)
この場合、JavaScriptを用いて、要素そのもののサイズを取得したり、ページの変化を監視したりといったことが必要になってきます。
$(function(){
reviseMargin();
function reviseMargin(){
$("#contents").css({
"margin-top":$("header")[0].offsetHeight + "px",
"margin-bottom": $("footer")[0].offsetHeight + "px"
});
}
});
上記のようなプログラムを用いることで、ページの読み込みが終わった際に各要素のサイズを確認し、margin
の値を再設定することができます。
ここで、offsetHeight
とは、padding
やborder
まで含めた要素自体のサイズを示しています。もし、CSSのサイズ指定に%と固定pxが入り交じっているようなレイアウトであっても、pxで値を得ることができます。
HTMLElement.offsetHeight - Web API インターフェイス | MDN
もし、windowサイズの変更にも対応するようにしたいならば、window
のresize
イベントにコールバックを設定しておけばOKです。
$(function(){
reviseMargin();
$(window).on("resize",reviseMargin);
function reviseMargin(){
$("#contents").css({
"margin-top":$("header")[0].offsetHeight + "px",
"margin-bottom": $("footer")[0].offsetHeight + "px"
});
}
});
実例
下画像は、LINEアカウント乗っ取り被害により、家族から依頼されて我が家のチャット用にwebsocketで作ったアプリのスクリーンショットです。こんな感じのレイアウトができます。
ちなみに、アプリは「やっぱLINEでいっか」という、アカウント作り直した家族の傍若無人な一言でお蔵入りとなりました。世知辛いです。
以上です。何かの参考になれば幸いです。