全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
ヘッダーを『position:fixed;』指定時にヘッダーの高さ分だけコンテンツを下げる
2018.08.27
※この記事は2018年08月27日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
ヘッダーを『position:fixed;』を指定時に、下部のコンテンツを、
Javascriptを使ってヘッダーの高さ分だけ下げる方法をご紹介します。
こういった場合、body要素の上部にヘッダーの高さ分だけ、paddingを指定したりして調整をすることがありますが、
レスポンシブコーディングのように、ヘッダーの高さが可変する場合、
高さを指定する方法は使えません。
今回、ご紹介する方法は、
そういった、可変するヘッダーに順応できる内容です。
【目次】
ヘッダーの高さ分だけコンテンツを下げる【デモ】
Javascriptでヘッダーの高さ分だけ「margin-top」を指定しています。
var height=$(“#header”).height();
は、高さの取得です。
現状、ヘッダーを指定していますが、
#header部分を、#footerとした場合、#footerを指定している要素の高さを取得します。
Javascriptでの高さ取得については、他の用途でも活用できそうですね。
注意事項ですが、HTML側でJqueryを指定しています。
Jqueryの指定がないと正常に表示できません。
まとめ
最近は、ヘッダー固定やレスポンシブコーディングでのご依頼が増えています。
ウィンドウサイズの可変に柔軟に対応できる、今回の方法は大変便利です。
是非、試してみてください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
