Web blog WEBブログ

ヘッダーを『position:fixed;』指定時にヘッダーの高さ分だけコンテンツを下げる

2018.08.27

こんにちは。コーダーの兼山です。

ヘッダーを『position:fixed;』を指定時に、下部のコンテンツを、
Javascriptを使ってヘッダーの高さ分だけ下げる方法をご紹介します。

こういった場合、body要素の上部にヘッダーの高さ分だけ、paddingを指定したりして調整をすることがありますが、
レスポンシブコーディングのように、ヘッダーの高さが可変する場合、
高さを指定する方法は使えません。

今回、ご紹介する方法は、
そういった、可変するヘッダーに順応できる内容です。

ヘッダーの高さ分だけコンテンツを下げる【デモ】

Javascriptでヘッダーの高さ分だけ「margin-top」を指定しています。
var height=$(“#header”).height();
は、高さの取得です。

現状、ヘッダーを指定していますが、
#header部分を、#footerとした場合、#footerを指定している要素の高さを取得します。
Javascriptでの高さ取得については、他の用途でも活用できそうですね。

注意事項ですが、HTML側でJqueryを指定しています。
Jqueryの指定がないと正常に表示できません。

まとめ

最近は、ヘッダー固定やレスポンシブコーディングでのご依頼が増えています。
ウィンドウサイズの可変に柔軟に対応できる、今回の方法は大変便利です。
是非、試してみてください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口