sawarasawara https://blog.hatena.ne.jp/sawarasawara/ MN7PM2 https://sawarashog.hateblo.jp/ Web開発 Bootstrapでヘッダ固定した場合、navbarの高さ分bodyの開始位置を下げる必要があります。 ヘッダの高さが予めわかっている場合は、固定値でbodyに対してpaddingすれば対応できますが ウィンドウサイズ変更などでヘッダ内改行が発生する場合、bodyがヘッダに隠れてしまいます。 今回はその対応を備忘録として記載します。 ・・・その前に、忙しい方のために結論ですが、javascriptで以下の処理を追加します。 $(window).on('load resize', function(){ // navbarの高さを取得する var height = $('.navbar').he… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fsawarashog.hateblo.jp%2Fentry%2F2016%2F10%2F15%2F233838" title="【Bootstrap】ヘッダ固定時の地味に嫌な問題に対応する - MN7PM2" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/s/sawarasawara/20161015/20161015231447.png Hatena Blog https://hatena.blog 2016-10-15 23:38:38 rich https://sawarashog.hateblo.jp/entry/2016/10/15/233838 1.0 100%