【Bootstrap】ヘッダ固定時の地味に嫌な問題に対応する - MN7PM2

Bootstrapでヘッダ固定した場合、navbarの高さ分bodyの開始位置を下げる必要があります。 ヘッダの高さが予めわかっている場合は、固定値でbodyに対してpaddingすれば対応できますが ウィンドウサイズ変更などでヘッダ内改行が発生する場合、bodyがヘッダに隠れてしまいます。 今回はその対応を備忘録として記載します。 ・・・その前に、忙しい方のために結論ですが、javascriptで以下の処理を追加します。 $(window).on('load resize', function(){ // navbarの高さを取得する var height = $('.navbar').height(); // bodyのpaddingにnavbarの高さを設定する $('body').css('padding-top',height); }); 前提 Boostrap3 v3.3.7

[lingling_yas]

“$(window).on('load resize', function(){ // navbarの高さを取得する var height = $('.navbar').height(); // bodyのpaddingにnavbarの高さを設定する $('body').css('padding-top',height); });”