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

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
jQuery 1.1.11

現象の整理

問題を再現させるため以下のページを用意します。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<h1>あいうえおきかけこたちつてとあああああああああああああ</h1>
</body>

以下のような表示になります。

①ヘッダ内改行なし（横幅最大）

f:id:sawarasawara:20161015232532p:plain:w500

②ヘッダ内改行あり（横幅中くらい）

f:id:sawarasawara:20161015231511p:plain:w500

③ヘッダ内改行なし（横幅最小）

f:id:sawarasawara:20161015232655p:plain:w500

文字が隠れてしまっていますね。

一般的な対応

単純に、スタイルシートに以下の記載を追加して、bodyの開始をずらします。

body { padding-top: 70px; }

しかしこれでは「②ヘッダ内改行あり（横幅中くらい）」の場合に対応できません。それを解決するのが次項になります。

高さの変化に対応

高さの変化に動的に対応するため、javascriptに以下の記載を追加します。

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