最近は、ヘッダー固定やレスポンシブコーディングでのご依頼が増えています。

ウィンドウサイズの可変に柔軟に対応できる、今回の方法は大変便利です。

レスポンシブに対応させたい（ヘッダーの高さが可変する）場合

body要素の上部にヘッダーの高さ分だけ、paddingを指定したりして調整をしたくなることがあります。

ただし、レスポンシブに対応させたい（ヘッダーの高さが可変する）場合、高さを指定する方法は使えません。

サンプルコード

<html>
<head>
<title>ヘッダーの高さ分だけコンテンツを下げる</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
    var height=$("#header").height();
    $("body").css("margin-top", height + 10);//10pxだけ余裕をもたせる
});
</script>
<style>
*{
    margin:0;
    padding:0;  
}
#header{
    position:fixed;
    top:0;
    margin:0;
    padding:4px;
    width:100%;
    background-color:#ccc;
    z-index:9999;
    height:50px;
}
</style>
</head>
<body>

<header id="header">
ヘッダ部分を記載します。
</header>

<main>
<p>上部のヘッダーの分だけ、下の要素が下がります。</p>
<p>スクロールで確認できるようにしています。</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</main>

</body>
</html>

通常は、JSファイルやスタイルシートは外部ファイルに記載しますが、ここでは説明のために一つのファイルにまとめています。

結果は次のように表示されます。

デモ

デモページ

解説

ヘッダーで「position:fixed;」を指定時に、下部のコンテンツを、Javascriptを使ってヘッダーの高さ分だけ下げています。

具体的にはJavascriptでヘッダーの高さ分だけ「margin-top」を指定しています。

下記のコードで、高さを取得しています。

var height=$("#header").height();

#header部分を、#footerとした場合、#footerを指定している要素の高さを取得します。

なお、Jqueryの指定がないと正常に表示できません。

また、z-indexは要素の重なりを決めることができるプロパティです。

z-indexを使う場合は、position:relative、absolute、fixedが指定されている要素にしか使えません。

まとめ

iframeやframe（HTML5で廃止）を使って対応してみたり、paddingを指定して調整しようとしますが、どの方法も上手くいかずに途方にくれる場合があるかもしれません。

その場合は上記の方法を試してみて下さい。

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

ページのトップへ戻る